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:
Similar Reads
- 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 us 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: Cr 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 Approa 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 1 min read
- Updates in Angular 12 Angular 12 is the latest version of the popular front-end web development framework. Angular released in May 2021 comes with several new features and improvements that enhance the performance, productivity, and stability of the framework. In this article, we will see different key features and impro 5 min read
- Pipes in Angular Pipes are often used for formatting dates, numbers, and Strings and they can be customized to suit various needs. In this article, we explain about how to use pipes in Angular with examples and related outputs for your reference.Prerequisites:To understand this article you should have knowledge of t 8 min read
- Angular 10 formatDate() Method In this article, we are going to see what is formatDate in Angular 10 and how to use it. formatDate is used to format a date according to locale rules. Syntax: formatDate(value, locale, format, timezone) Parameters: value: The number to format.locale: A locale code for the locale format.format: The 2 min read
- Angular10 SlicePipe In this article, we are going to see what is SlicePipe in Angular 10 and how to use it. SlicePipe is used to create an array containing a slice of the element. Syntax: {{ value | SlicePipe }} NgModule: Module used by SlicePipe is: CommonModule Approach: Create the angular app to be usedThere is no 2 min read
- Angular orderBy Pipe Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. In this article, we will learn How to use orderBy in Angular pipe. The orderBy is used with a dependency called lodash. We will implement a pipe to achieve the desired r 3 min read
- AngularJS | date Filter AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is 'MMM d, yyyy'. Syntax: {{ date | date : format : timezone }} Parameter Values: The date filter contains format and timezone parameters which is optional.Some com 2 min read