Angular 10 DatePipe API (original) (raw)

Last Updated : 04 Aug, 2021

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

Date {{today | date}}

Time {{today | date:'h:mm a z'}}

`

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

Date {{today | date}}

Time {{today | date:'h:m:s'}}

`

Output: