trackBy

Load content from TS by clicking the button

TS

export class TrackbyComponent {
  courses;
  loadCourses() {
    this.courses = [
      { id: 1, name: 'Course 1'},
      { id: 2, name: 'Course 2'},
      { id: 3, name: 'Course 3'},
    ];
  }
  trackCourse(index, course) {
    return course ? course.id : undefined;
  }
}

HTML

<button (click)="loadCourses()" class="btn btn-dark my-3">Load Courses</button>
<div class="card">
<ul class="list-group">
    <li *ngFor="let course of courses; trackBy: trackCourse" 
    class="list-group-item d-flex justify-content-between">
        {{course.name}}
    </li>
</ul>
</div>