Angular date pipe not working properly in HTML

Angular Pipe not working

I am trying to use Angular's date pipe. For some reason I can't seem to get it to work. I tried a couple things like changing the date to a string before passing it through the pipe or putting the pipe in other places in my HTML, but it doesn't seem to work. Any advice is greatly appreciated (:

Component HTML file

<h1>My todos</h1>

<table border="1">
  <caption>Fun times ahead</caption>
  <caption>{{testDate}}</caption>
  <caption>{{testDate2 | date}}</caption>
  <thead>
    <tr>
      <th>Description</th>
      <th>Target Completion Date</th>
      <th>Is it done?</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let todo of todos">
      <th>{{todo.description}}</th>
      <th>{{todo.targetDate}}</th>
      <th *ngIf="todo.done">Yes</th>
      <th *ngIf="!todo.done">No</th>
    </tr>
  </tbody>
</table>

Component TS file

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

export class Todo{
  constructor(public id:number, public description:string, public done:boolean, public targetDate:String){

  }
}

@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css']
})
export class ListTodosComponent implements OnInit{

  testDate : String = new Date(2010, 1, 1).toDateString()
  testDate2 : String = new Date(2010, 1, 2).toDateString()

  todos = [
    new Todo(1, 'ex1', true, new Date().toDateString()),
    new Todo(2, 'ex2', false, new Date().toDateString()),
    new Todo(3, 'ex3', false, new Date().toDateString()),
    new Todo(4, 'ex4', false, new Date().toDateString()),
    new Todo(5, 'ex5', false, new Date().toDateString()),
    new Todo(6, 'ex6', false, new Date().toDateString()),
  ]

  constructor() {

  }

  ngOnInit(){

  }

}

Import the DatePipe module and Inject the DatePipe in your component's constructor. Date pipe should now be applied to the targetDate property of each todo object in the table, formatting the date according to your locale

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

export class Todo {
  constructor(
    public id: number,
    public description: string,
    public done: boolean,
    public targetDate: string
  ) {}
}

@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css'],
  providers: [DatePipe] // Add DatePipe as a provider
})
export class ListTodosComponent implements OnInit {
  testDate: string = new Date(2010, 1, 1).toDateString();
  testDate2: string = new Date(2010, 1, 2).toDateString();

  todos = [
    new Todo(1, 'ex1', true, new Date().toDateString()),
    new Todo(2, 'ex2', false, new Date().toDateString()),
    new Todo(3, 'ex3', false, new Date().toDateString()),
    new Todo(4, 'ex4', false, new Date().toDateString()),
    new Todo(5, 'ex5', false, new Date().toDateString()),
    new Todo(6, 'ex6', false, new Date().toDateString()),
  ];

  constructor(private datePipe: DatePipe) {}

  ngOnInit() {}
}

Format the dates using the DatePipe in your template: In your template, instead of directly accessing the targetDate property of your todo object, use the datePipe to format the date. Modify the line where you display the target date as

HTML

<th>{{ todo.targetDate | date }}</th>

hope it's helpful..