Using Pipes to transform Data. Here, the task.dueDate string into date.

src/app/task/task.component.html

@@ -1,7 +1,7 @@
 <app-card>
   <article>
     <h2>{{ task.title }}</h2>
-    <time>Date: {{ task.dueDate }}</time>
+    <time>Date: {{ task.dueDate | date:'fullDate' }}</time>
     <p>{{ task.summary }}</p>
     <p class="actions">
       <button (click)="onCompleteTask()">Complete</button>

src/app/task/task.component.ts

@@ -1,11 +1,13 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import { Task } from './task.model';
 import {CardComponent} from '../shared/card/card.component';
+import {DatePipe} from '@angular/common';
 
 @Component({
   selector: 'app-task',
   imports: [
-    CardComponent
+    CardComponent,
+    DatePipe
   ],
   templateUrl: './task.component.html',
   styleUrl: './task.component.css'