In this article, we are going to see what is DatePipe in Angular 10 and how to use it.
DatePipe is used to format a date value according to locale rules.
Syntax:
{{ value | date }}
Approach:
- Create the angular app that to be used.
- There is no need for any import for the DatePipe to be used.
- In app.component.ts define the variable that takes date value.
- In app.component.html use the above syntax to make date element.
- serve the angular app using ng serve to see the output.
Parameters:
- format: It takes a string value.
- timezone: It takes a string value.
- locale: It takes a string value.
Example 1:
app.component.ts
import { Component, OnInit }
from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html'
})
export class AppComponent {
today: number = Date.now();
}
|
app.component.html
< p >Date {{today | date}}</ p >
< p >Time {{today | date:'h:mm a z'}}</ p >
|
Output:
Example 2:
app.component.ts
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html'
})
export class AppComponent {
today: number = Date.now();
}
|
app.component.html
< p >Date {{today | date}}</ p >
< p >Time {{today | date:'h:m:s'}}</ p >
|
Output:
Last Updated :
04 Aug, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...