Q1. What are some performance optimization techniques in Angular?
Key techniques: lazy loading modules, using OnPush change detection strategy, using trackBy in *ngFor, avoiding complex computations in templates, using pure pipes instead of methods, unsubscribing from observables, using async pipe, and optimizing bundle size with tree-shaking and differential loading.
Q2. What is OnPush change detection?
OnPush is a change detection strategy that tells Angular to only check a component when its @Input properties change (by reference), or when events originate from the component or its children. This reduces the number of change detection cycles and improves performance, especially for large apps.
Q3. How does trackBy improve *ngFor performance?
trackBy provides a unique identifier for each item. When the array changes, Angular can identify which items were added/removed/moved instead of re-rendering the entire list. This significantly improves performance for large lists. Implement a function that returns a unique id.
Q4. Why should you avoid methods in templates?
Methods in templates are called on every change detection cycle, which can be frequent. For complex calculations, this kills performance. Use pure pipes instead, which are memoized and only recalculated when input changes, or compute values in the component and update when needed.
Q5. What is differential loading in Angular?
Differential loading is a feature where Angular builds two bundles: one for modern browsers (ES2015+) and one for legacy browsers (ES5). Modern browsers receive smaller, more efficient code, improving load time. It''s enabled by default in production builds since Angular 8.