Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Angular 10 DatePipe API

  • Difficulty Level : Basic
  • 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




<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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!