Pipes Demo - Date Pipe

date-pipe.component.ts

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

@Component({
  selector: 'app-date-pipe',
  template: `
    <p>Date without Pipe: {{date}}</p>
    <p>Date with Pipe: {{date | date}} </p>

    <h3>Showing Dates</h3>
    <p>Short Date: {{date | date:'shortDate'}}</p>
    <p>Medium Date: {{date | date:'mediumDate'}}</p>
    <p>Long Date: {{date | date:'longDate'}}</p>

    <h3>Dates with Parameters</h3>
    <p>dd/mm/yyyy: {{date | date:'d MMM y'}}</p>
    <p>yyyy/mm/dd: {{date | date:'y MMM d'}}</p>

    <h3>Formatting Times</h3>
    <p>Short time: {{date | date:'shortTime'}}</p>
    <p>Medium time: {{date | date:'mediumTime'}}</p>
    <p>Long time: {{date | date:'longTime'}}</p>
  `,
  styleUrls: []
})
export class DatePipeComponent {
  date: Date = new Date();
}