you should use trackBy to resolve this – see docs

should looks something like the following (in the html):

    <li *ngFor="let item of checkboxesDataList; trackBy: trackById">
        <input type="checkbox" name="" id="" [(ngModel)]="item.isChecked"
            (change)="changeSelection()">{{item.label}}
    </li>

in in your component:

trackById(item: {id: string}) {
    return item.id;
}

id being passed to deleteTodo method should be string.

deleteTodo(id: string): void {
    this.selectedItemsList = this.selectedItemsList.filter(item => item.id !== id);
  }

You forgot to update the checkboxesDataList on deletion.
Please find the working code below.
https://stackblitz.com/edit/angular-ivy-s468tm?file=src/app/app.component.ts

Just update following method:

deleteTodo(id: number): void {
    
    this.selectedItemsList = this.selectedItemsList.filter(
      item => item.id !== id
    );
    this.checkboxesDataList.forEach(element => {
      if (element.id == id.toString()) {
        element.isChecked = false;
      }
    });
  }

I have a Json object which i use to display checkboxes using ngFor angular 7 directive,on selecting any of the checkboxes the values of labels are displayed on same page with provision of delete each value from this list but the list is not updating when deleting values.
Code is attached,thanks for help in advance.

my ts file

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

@Component({
  selector: 'app-checkboxexample',
  templateUrl: './checkboxexample.component.html',
  styleUrls: ['./checkboxexample.component.scss']
})
export class CheckboxexampleComponent implements OnInit {

  selectedItemsList = [];
  checkedIDs = [];

  checkboxesDataList = [
    {
      id: 'C001',
      label: 'Photography',
      isChecked: true
    },
    {
      id: 'C002',
      label: 'Writing',
      isChecked: true
    },
    {
      id: 'C003',
      label: 'Painting',
      isChecked: true
    },
    {
      id: 'C004',
      label: 'Knitting',
      isChecked: false
    },
    {
      id: 'C004',
      label: 'Dancing',
      isChecked: false
    },
    {
      id: 'C005',
      label: 'Gardening',
      isChecked: true
    },
    {
      id: 'C006',
      label: 'Drawing',
      isChecked: true
    },
    {
      id: 'C007',
      label: 'Gyming',
      isChecked: false
    },
    {
      id: 'C008',
      label: 'Cooking',
      isChecked: true
    },
    {
      id: 'C009',
      label: 'Scrapbooking',
      isChecked: false
    },
    {
      id: 'C010',
      label: 'Origami',
      isChecked: false
    }
  ]

  ngOnInit(): void {
    this.fetchSelectedItems()
    this.fetchCheckedIDs()
  }

  changeSelection() {
    this.fetchSelectedItems()

  }

  fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      return value.isChecked
    });
  }

  fetchCheckedIDs() {
    this.checkedIDs = []
    this.checkboxesDataList.forEach((value, index) => {
      if (value.isChecked) {
        this.checkedIDs.push(value.id);
      }
    });
  }
  deleteTodo(id: number): void {
    this.selectedItemsList = this.selectedItemsList.filter(item => item.id !== id);
  }
}

related html file

    <h1>Checklist</h1>
<div class="row">

    <div class="col-md-4">
        <h4>List of Hobbies</h4>

        <ul class="checkbox-items">
            <li *ngFor="let item of checkboxesDataList">
                <input type="checkbox" name="" id="" [(ngModel)]="item.isChecked"
                    (change)="changeSelection()">{{item.label}}
            </li>
        </ul>

    </div>

    <div class="col-md-4">
        <h4>No of Selected Hobbies: {{selectedItemsList.length}} </h4>
        <ul>
            <li *ngFor="let item of selectedItemsList">{{item.label}}
                <div class="remove-item" (click)="deleteTodo(item.id)">
                    &times;
                </div>
            </li>

        </ul>

    </div>

    <div class="col-md-4">
        <h4>Object</h4>
        <code>
    {{selectedItemsList | json}}
    </code>

        <h4>Array of IDs</h4>
        <code>{{checkedIDs}}</code>
    </div>

</div>