View is not getting updated even after model is changed in filterTaskList but the same view is getting updated for deleteTask method in Angular

Question

In the below code when deletedTask is called view is getting updated properly but when filterTaskList is called it gives the proper response but the same is not refecting on UI

export class TasKListComponent implements OnInit{
   constructor(private service:ToDoService){}

  ngOnInit(): void {
      console.log(' ngOnInit called TaskList');
      this.getTaskList();
  }

  taskList:toDoTaskModel[]=[]
  getTaskList(){
    this.service.getAllTask().subscribe({
      next : res=>{
        console.log('getTaskList called ');
        this.taskList=res;       
      }
    });
  }

  deleteTask(id:number){
    this.service.deleteTask(id).subscribe({
      next : res=> {
        console.log(' deleted '+res)
        this.getTaskList()
      }
    });
  }

  filterTaskList(title:string):void{
    console.log(' filterTaskList '+title);
    this.service.searchTask(title).subscribe({
      next : res=>{
        console.log(('serach len '+res.length));
        this.taskList=res;
      }
    })
  }
}

below is the response after successful delete

[{"id":255,"createdDate":"2023-09-18T19:02:39.131+00:00","lastUpdatedDate":"2023-09-18T19:02:39.131+00:00","desciption":"Test","title":"do the testing of angular app","colourCode":null},{"id":102,"createdDate":"2023-09-18T06:56:46.592+00:00","lastUpdatedDate":"2023-09-18T06:56:46.592+00:00","desciption":"Tablet","title":"Samsung S8 Tab","colourCode":null},{"id":54,"createdDate":"2023-09-14T05:25:54.987+00:00","lastUpdatedDate":"2023-09-14T05:25:54.987+00:00","desciption":"First Task","title":"Complete the spring boot course","colourCode":null},{"id":55,"createdDate":"2023-09-14T05:27:09.590+00:00","lastUpdatedDate":"2023-09-14T05:27:09.590+00:00","desciption":"This is second Taks","title":"complete spring","colourCode":null},{"id":152,"createdDate":"2023-09-18T15:09:39.234+00:00","lastUpdatedDate":"2023-09-18T15:09:39.234+00:00","desciption":"App","title":"Fix bugs","colourCode":null},{"id":257,"createdDate":"2023-09-18T19:11:53.242+00:00","lastUpdatedDate":"2023-09-18T19:11:53.242+00:00","desciption":"Java","title":"Stream,Collections","colourCode":null},{"id":203,"createdDate":"2023-09-18T16:18:48.263+00:00","lastUpdatedDate":"2023-09-18T16:18:48.263+00:00","desciption":"Iphone","title":"check specification","colourCode":null},{"id":256,"createdDate":"2023-09-18T19:05:19.247+00:00","lastUpdatedDate":"2023-09-18T19:05:19.247+00:00","desciption":"Spring Boot","title":"study actuator","colourCode":null},{"id":258,"createdDate":"2023-09-18T19:34:16.347+00:00","lastUpdatedDate":"2023-09-18T19:34:16.347+00:00","desciption":"Buy Pen","title":"need to buy pen","colourCode":null}]

below the the res after successful filter

[{"id":255,"createdDate":"2023-09-18T19:02:39.131+00:00","lastUpdatedDate":"2023-09-18T19:02:39.131+00:00","desciption":"Test","title":"do the testing of angular app","colourCode":null},{"id":152,"createdDate":"2023-09-18T15:09:39.234+00:00","lastUpdatedDate":"2023-09-18T15:09:39.234+00:00","desciption":"App","title":"Fix bugs","colourCode":null},{"id":203,"createdDate":"2023-09-18T16:18:48.263+00:00","lastUpdatedDate":"2023-09-18T16:18:48.263+00:00","desciption":"Iphone","title":"check specification","colourCode":null}]

Below is the view Model

<div class="d-flex flex-column flex-sm-row flex-wrap justify-content-start gap-2" >
    <div class="card" *ngFor="let task of taskList" style="width: 15rem;">
        <div class="card-header">
            Created on : {{task.createdDate | date}}
          </div>
          <div class="card-body">
            <h5 class="card-title">{{task.title}}</h5>
            <p class="card-text">{{task.desciption}}</p>
            <div class="d-flex justify-content-between">
              <a class="btn btn-warning"  (click)="deleteTask(task.id)">Delete </a>
              <a class="btn btn-primary">Update</a>
            </div>
          </div>
    </div>
</div>

souce code