onChange

Change the string of list-group-item by click the save button

TS

export class ChangedetectionComponent{
  courses = [
    { id: 1, name: 'Course 1'},
    { id: 2, name: 'Course 2'},
    { id: 3, name: 'Course 3'},
  ];

  onAdd(){
    this.courses.push({ id: 4, name: 'Course 4' });
  }
  onRemove(course){
    let index = this.courses.indexOf(course);
    this.courses.splice(index, 1);
  }
  onChange(course){
    course.name = 'Updated';
  }
}

HTML

<button (click)="onAdd()" class="btn btn-dark my-3">Add</button>
<div class="card">
<ul class="list-group">
    <li *ngFor="let course of courses" 
    class="list-group-item d-flex justify-content-between">
        {{course.name}}
        <button (click)="onChange(course)" class="btn btn-dark">
            <i class="fa-solid fa-floppy-disk"></i>
        </button>
    </li>
</ul>
</div>