Date format pipe example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Date-format-pipe-example-in-angular --style=scss --routing --skip-install

cd Date-format-pipe-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  todayDate : Date = new Date();

}

Open app.component.html file and update code as below

<h1>Date format pipe example in angular</h1>

<p><b>M/d/yy, h:mm a:</b>{{todayDate | date:'short'}}</p>

<p><b>MMM d, y, h:mm:ss a:</b>{{todayDate | date:'medium'}}</p>

<p><b>MMMM d, y, h:mm:ss a z:</b>{{todayDate | date:'long'}}</p>

<p><b>EEEE, MMMM d, y, h:mm:ss a zzzz:</b>{{todayDate | date:'full'}}</p>

<p><b>M/d/yy:</b>{{todayDate | date:'shortDate'}}</p>

<p><b>MMM d, y:</b>{{todayDate | date:'mediumDate'}}</p>

<p><b>MMMM d, y:</b>{{todayDate | date:'longDate'}}</p>

<p><b>EEEE, MMMM d, y:</b>{{todayDate | date:'fullDate'}}</p>

<p><b>h:mm a:</b>{{todayDate | date:'shortTime'}}</p>

<p><b>h:mm:ss a:</b>{{todayDate | date:'mediumTime'}}</p>

<p><b>h:mm:ss a z:</b>{{todayDate | date:'longTime'}}</p>

<p><b>h:mm:ss a zzzz:</b>{{todayDate | date:'fullTime'}}</p>

Output: