Angular 10 DatePipe API
Last Updated :
04 Aug, 2021
Improve
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:
