dpsthree

<!--
  As the references change ngFor will continuously regenerate the DOM
  However, the presence of trackBy provides ngFor some help.
  It modifies the behavior so that it compares new data to old based on
  the return value of the supplied trackBy method.
  This allows Angular to reduce the amount of DOM update needed
-->
<ul>
  <li *ngFor="let instructor of instructorList: trackBy: trackByName" >
    <span>Instructor Name {{ instructor.name }}</span>

dpsthree

import {
  Component, Input, AfterViewInit,
  ChangeDetectionStrategy, ChangeDetectorRef
} from '@angular/core';

@Component({
  selector: 'app-instructor-list',
  templateUrl: './instructor-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

dpsthree

<!--
  Since all bound values arrive as inputs
  this component is suitable for use with OnPush
-->
<ul>
  <li *ngFor="let instructor of instructors">
    {{ instructor }}
  </li>
</ul>

dpsthree

<input type="text" [(ngMode)]="searchTerm">
<button (click)="update()">Search</button>
<ul>
  <li *ngFor="let instructor of instructors">
    {{ instructor }}
  </li>
</ul>