Push

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' });
  }

}

HTML

<button (click)="onAdd()" class="btn btn-dark my-3">Add</button>
<ul>
    <li *ngFor="let course of courses">
        {{course.name}}
    </li>
</ul>
Was this page helpful?