Open In App

Angular 10 DatePipe API

Last Updated : 04 Aug, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Similar Reads

Difference between REST API and SOAP API
There is no direct comparison between SOAP and REST APIs. But there are some points to be listed below which makes you choose better between these two web services. Here are: SOAP stands for Simple Object Access Protocol and REST stands for Representational State Transfer.Since SOAP is a protocol, it follows a strict standard to allow communication
2 min read
Difference Between REST API and RPC API
REST and RPC are design architectures widely used in web development to build APIs (Application Programming Interface). It is a set of instructions that permits two systems to share resources and services. The client creates a request to the server that responds to it with data in JSON or XML format. REST APIs It stands for Representational State T
3 min read
Know the Difference Between REST API and RESTful API
APIs (Application Programming Interface) act as an interface between two applications to interact and provide the relevant data. It uses a set of protocols using which the operation is done. Salesforce was the first organization to officially launch API, followed by eBay and Amazon. Also, 60% of transactions made on eBay use their APIs. If we talk
5 min read
How to Publish Any API on Rapid API Platform ?
The Rapid API Platform is a multi-cloud, customized hub to find, connect to, and share APIs. The API Platform improves the developer experience with integrated tools for designing, testing, monitoring, building, publishing APIs, and more. If you have any Rest API endpoints already built, you can easily list your API on the Rapid API platform. In th
2 min read
Angular 10 DemicalPipe API
In this article, we are going to see what is DemicalPipe in Angular 10 and how to use it. The DemicalPipe is used to format a value according to digit options and locale rules. Syntax: {{ value | number}} NgModule: Module used by DecimalPipe is: CommonModule Approach: Create an Angular app to be used.There is no need for any import for the DecimalP
2 min read
Angular 10 isPlatformWorkerUi API
In this article, we are going to see what is isPlatformWorkerUi in Angular 10 and how to use it. The isPlatformWorkerUi API is used to get a platform id that represents a web worker UI platform. Syntax: isPlatformWorkerUi( platformId ); NgModule: Module used by isPlatformWorkerUi is: CommonModule Return Value: It returns a Boolean Value stating whe
2 min read
Angular 10 WeekDay API
In this article, we are going to see what is WeekDay in Angular 10 and how to use it. The WeekDay API in Angular10 is used to get the value for each day of the week. Syntax: enum WeekDay { Sunday: 0 Monday Tuesday Wednesday Thursday Friday Saturday } NgModule: Module used by WeekDay is: CommonModule Approach: Create an angular app that to be used.I
1 min read
Angular 10 isPlatformWorkerApp API
In this article, we are going to see what is isPlatformWorkerApp in Angular 10 and how to use it. The isPlatformWorkerApp API is used to get a platform id that represents a worker app platform. Syntax: isPlatformWorkerApp( platformId ); NgModule: Module used by isPlatformWorkerApp is: CommonModule Return Value: It returns a Boolean Value stating wh
2 min read
Angular 10 I18nSelectPipe API
In this article, we are going to see what is I18nSelectPipe in Angular 10 and how to use it. I18nSelectPipe is a selector that is used to displays the string that matches the current value. Syntax: {{ value | i18nSelect : map}} NgModule: Module used by I18nSelectPipe is: CommonModule Approach: Create the angular app to be used.There is no need for
2 min read
Angular 10 I18nPluralPipe API
In this article, we are going to see what is I18nPluralPipe in Angular 10 and how to use it. The I18nPluralPipe is a map that takes a string value that pluralizes according to given rules. Syntax: {{ value | i18nPlural : map [ : rule]}} NgModule: Module used by I18nPluralPipe is: CommonModule Approach: Create an angular app to be used.There is no n
2 min read