pipe of date angular

What is Pipe of Date Angular?#

Pipe of Date Angular is a feature in Angular that allows us to format date values in a convenient and flexible way. It is a built-in pipe that can be used to transform a date object into a string of desired format.

Syntax of Pipe of Date Angular#

  {{ dateValue | date: 'format' }}

• dateValue : The input value that we want to format.
• format : The desired date format string.

Below is an example of how to use Pipe of Date Angular in HTML:

  <p> Today's date is {{ currentDate | date:'fullDate' }} </p>

Here, the value of the currentDate variable will be formatted as per the 'fullDate' format string and displayed in the HTML.

Available Date Formats in Pipe of Date Angular#

• 'short': 'M/d/yy, h:mm a'
• 'medium': 'MMM d, y, h:mm:ss a'
• 'long': 'MMMM d, y, h:mm:ss a z'
• 'full': 'EEEE, MMMM d, y, h:mm:ss a zzzz'
• 'shortDate': 'M/d/yy'
• 'mediumDate': 'MMM d, y'
• 'longDate': 'MMMM d, y'
• 'fullDate': 'EEEE, MMMM d, y'
• 'shortTime': 'h:mm a'
• 'mediumTime': 'h:mm:ss a'
• 'longTime': 'h:mm:ss a z'
• 'fullTime': 'h:mm:ss a zzzz'

We can use any of the above formats or create our custom format string using predefined format options. Below is an example of how to create a custom format string:

  <p> Today's date is {{ currentDate | date:'MMM dd, yyyy h:mm a' }} </p>

Multiple Ways to Use Pipe of Date Angular#

Apart from using Pipe of Date Angular in HTML, we can also use it in TypeScript code. Below is an example of how to use it in TypeScript code:

  import { Pipe, PipeTransform } from '@angular/core';
  import { DatePipe } from '@angular/common';

  @Pipe({ name: 'customDate' })
  export class CustomDatePipe implements PipeTransform {
    transform(value: any, format: string): any {
      const datePipe = new DatePipe('en-US');
      return datePipe.transform(value, format);
    }
  }

Here, we have created a custom pipe named 'customDate' that takes two arguments: 'value' and 'format'. We have used the DatePipe provided by Angular to transform the input date value into a string of desired format.

We can use this custom pipe in HTML like this:

  <p> Today's date is {{ currentDate | customDate:'MMM dd, yyyy h:mm a' }} </p>

There are many other ways to use and customize Pipe of Date Angular. It is a powerful feature that can make our date formatting tasks much easier and efficient.