Angular Performance Tips

The Solution

By splitting the search input and card list into separate components, we prevent unnecessary re-renders of the cards when typing.

Benefits:

Search input changes don't affect card list
OnPush change detection works effectively
Better component isolation
Improved performance

Fixed Code:


// Separate search component
@Component({
  selector: 'app-search-box',
  template:
    <input [(ngModel)]="searchTerm" (ngModelChange)="search.emit($event)">

})
export class SearchBoxComponent {
@Output() search = new EventEmitter<string>();
}

// Separate cards list component
@Component({
  selector: 'app-cards-list',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CardsListComponent {
@Input() cards: Card[] = [];
}

// Parent component
@Component({
  template:
    <app-search-box (search)="onSearch($event)"></app-search-box>
    <app-cards-list [cards]="filteredCards"></app-cards-list>

})

Type in the search box below and watch the console. Notice how the cards only re-render when the filtered results change, not on every keystroke.

Learn more about better design of components here.

Last filter update: 7:56:46 PM