Angular 10 DatePipe API

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: