Tim Deschryver • 1/24/2022

Writing a performant client-side filter with [hidden] and trackBy

This technical article compares the performance of Angular's *ngIf directive versus the HTML [hidden] attribute for client-side list filtering. It demonstrates how combining [hidden] with Angular's trackBy function prevents DOM re-creation, leading to a smoother user experience during rapid input, especially when filtered results expand. Includes a practical example with a list of 250 words.

0 comments

#performance optimization #angular #Hidden Attribute