A personal opinionated compilation of the most useful practices to be aware of when developing angular apps.
On each ngDoCheck
triggered for the ngForOf
directive, Angular checks what objects have changed. It uses differs for this process and each differ uses trackBy function to compare the current object with the new one. The default trackBy
function tracks items by identity:
(index: number, item: any) => item;
If the value changes, the differ reports a change. As we've seen, the default function returns object references, it will not match the current item if the object reference has changed! By customizing the trackBy
function, such that it will return something else, for example, some key value of the object, will prevent angular from re-rendering the whole DOM tree by not reporting uneccesary changes. Example: