Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/angular-js/angular-10-datepipe-api/ below:

Angular 10 DatePipe API - GeeksforGeeks

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:

import { Component, OnInit } 
from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    today: number = Date.now();
}

<p>Date {{today | date}}</p>

   
<p>Time {{today | date:'h:mm a z'}}</p>

Output:

Example 2:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    today: number = Date.now();
}

<p>Date {{today | date}}</p>

   
<p>Time {{today | date:'h:m:s'}}</p>

Output:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4