Angular Best Practices

1---
2name: angular-best-practices
3description: Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
4risk: safe
5source: self
6---
7 
8# Angular Best Practices
9 
10Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
11 
12## When to Apply
13 
14Reference these guidelines when:
15 
16- Writing new Angular components or pages
17- Implementing data fetching patterns
18- Reviewing code for performance issues
19- Refactoring existing Angular code
20- Optimizing bundle size or load times
21- Configuring SSR/hydration
22 
23---
24 
25## Rule Categories by Priority
26 
27| Priority | Category              | Impact     | Focus                           |
28| -------- | --------------------- | ---------- | ------------------------------- |
29| 1        | Change Detection      | CRITICAL   | Signals, OnPush, Zoneless       |
30| 2        | Async Waterfalls      | CRITICAL   | RxJS patterns, SSR preloading   |
31| 3        | Bundle Optimization   | CRITICAL   | Lazy loading, tree shaking      |
32| 4        | Rendering Performance | HIGH       | @defer, trackBy, virtualization |
33| 5        | Server-Side Rendering | HIGH       | Hydration, prerendering         |
34| 6        | Template Optimization | MEDIUM     | Control flow, pipes             |
35| 7        | State Management      | MEDIUM     | Signal patterns, selectors      |
36| 8        | Memory Management     | LOW-MEDIUM | Cleanup, subscriptions          |
37 
38---
39 
40## 1. Change Detection (CRITICAL)
41 
42### Use OnPush Change Detection
43 
44```typescript
45// CORRECT - OnPush with Signals
46@Component({
47  changeDetection: ChangeDetectionStrategy.OnPush,
48  template: `<div>{{ count() }}</div>`,
49})
50export class CounterComponent {
51  count = signal(0);
52}
53 
54// WRONG - Default change detection
55@Component({
56  template: `<div>{{ count }}</div>`, // Checked every cycle
57})
58export class CounterComponent {
59  count = 0;
60}
61```
62 
63### Prefer Signals Over Mutable Properties
64 
65```typescript
66// CORRECT - Signals trigger precise updates
67@Component({
68  template: `
69    <h1>{{ title() }}</h1>
70    <p>Count: {{ count() }}</p>
71  `,
72})
73export class DashboardComponent {
74  title = signal("Dashboard");
75  count = signal(0);
76}
77 
78// WRONG - Mutable properties require zone.js checks
79@Component({
80  template: `
81    <h1>{{ title }}</h1>
82    <p>Count: {{ count }}</p>
83  `,
84})
85export class DashboardComponent {
86  title = "Dashboard";
87  count = 0;
88}
89```
90 
91### Enable Zoneless for New Projects
92 
93```typescript
94// main.ts - Zoneless Angular (v20+)
95bootstrapApplication(AppComponent, {
96  providers: [provideZonelessChangeDetection()],
97});
98```
99 
100**Benefits:**
101 
102- No zone.js patches on async APIs
103- Smaller bundle (~15KB savings)
104- Clean stack traces for debugging
105- Better micro-frontend compatibility
106 
107---
108 
109## 2. Async Operations & Waterfalls (CRITICAL)
110 
111### Eliminate Sequential Data Fetching
112 
113```typescript
114// WRONG - Nested subscriptions create waterfalls
115this.route.params.subscribe((params) => {
116  // 1. Wait for params
117  this.userService.getUser(params.id).subscribe((user) => {
118    // 2. Wait for user
119    this.postsService.getPosts(user.id).subscribe((posts) => {
120      // 3. Wait for posts
121    });
122  });
123});
124 
125// CORRECT - Parallel execution with forkJoin
126forkJoin({
127  user: this.userService.getUser(id),
128  posts: this.postsService.getPosts(id),
129}).subscribe((data) => {
130  // Fetched in parallel
131});
132 
133// CORRECT - Flatten dependent calls with switchMap
134this.route.params
135  .pipe(
136    map((p) => p.id),
137    switchMap((id) => this.userService.getUser(id)),
138  )
139  .subscribe();
140```
141 
142### Avoid Client-Side Waterfalls in SSR
143 
144```typescript
145// CORRECT - Use resolvers or blocking hydration for critical data
146export const route: Route = {
147  path: "profile/:id",
148  resolve: { data: profileResolver }, // Fetched on server before navigation
149  component: ProfileComponent,
150};
151 
152// WRONG - Component fetches data on init
153class ProfileComponent implements OnInit {
154  ngOnInit() {
155    // Starts ONLY after JS loads and component renders
156    this.http.get("/api/profile").subscribe();
157  }
158}
159```
160 
161---
162 
163## 3. Bundle Optimization (CRITICAL)
164 
165### Lazy Load Routes
166 
167```typescript
168// CORRECT - Lazy load feature routes
169export const routes: Routes = [
170  {
171    path: "admin",
172    loadChildren: () =>
173      import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
174  },
175  {
176    path: "dashboard",
177    loadComponent: () =>
178      import("./dashboard/dashboard.component").then(
179        (m) => m.DashboardComponent,
180      ),
181  },
182];
183 
184// WRONG - Eager loading everything
185import { AdminModule } from "./admin/admin.module";
186export const routes: Routes = [
187  { path: "admin", component: AdminComponent }, // In main bundle
188];
189```
190 
191### Use @defer for Heavy Components
192 
193```html
194<!-- CORRECT - Heavy component loads on demand -->
195@defer (on viewport) {
196<app-analytics-chart [data]="data()" />
197} @placeholder {
198<div class="chart-skeleton"></div>
199}
200 
201<!-- WRONG - Heavy component in initial bundle -->
202<app-analytics-chart [data]="data()" />
203```
204 
205### Avoid Barrel File Re-exports
206 
207```typescript
208// WRONG - Imports entire barrel, breaks tree-shaking
209import { Button, Modal, Table } from "@shared/components";
210 
211// CORRECT - Direct imports
212import { Button } from "@shared/components/button/button.component";
213import { Modal } from "@shared/components/modal/modal.component";
214```
215 
216### Dynamic Import Third-Party Libraries
217 
218```typescript
219// CORRECT - Load heavy library on demand
220async loadChart() {
221  const { Chart } = await import('chart.js');
222  this.chart = new Chart(this.canvas, config);
223}
224 
225// WRONG - Bundle Chart.js in main chunk
226import { Chart } from 'chart.js';
227```
228 
229---
230 
231## 4. Rendering Performance (HIGH)
232 
233### Always Use trackBy with @for
234 
235```html
236<!-- CORRECT - Efficient DOM updates -->
237@for (item of items(); track item.id) {
238<app-item-card [item]="item" />
239}
240 
241<!-- WRONG - Entire list re-renders on any change -->
242@for (item of items(); track $index) {
243<app-item-card [item]="item" />
244}
245```
246 
247### Use Virtual Scrolling for Large Lists
248 
249```typescript
250import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
251 
252@Component({
253  imports: [CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll],
254  template: `
255    <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
256      <div *cdkVirtualFor="let item of items" class="item">
257        {{ item.name }}
258      </div>
259    </cdk-virtual-scroll-viewport>
260  `
261})
262```
263 
264### Prefer Pure Pipes Over Methods
265 
266```typescript
267// CORRECT - Pure pipe, memoized
268@Pipe({ name: 'filterActive', standalone: true, pure: true })
269export class FilterActivePipe implements PipeTransform {
270  transform(items: Item[]): Item[] {
271    return items.filter(i => i.active);
272  }
273}
274 
275// Template
276@for (item of items() | filterActive; track item.id) { ... }
277 
278// WRONG - Method called every change detection
279@for (item of getActiveItems(); track item.id) { ... }
280```
281 
282### Use computed() for Derived Data
283 
284```typescript
285// CORRECT - Computed, cached until dependencies change
286export class ProductStore {
287  products = signal<Product[]>([]);
288  filter = signal('');
289 
290  filteredProducts = computed(() => {
291    const f = this.filter().toLowerCase();
292    return this.products().filter(p =>
293      p.name.toLowerCase().includes(f)
294    );
295  });
296}
297 
298// WRONG - Recalculates every access
299get filteredProducts() {
300  return this.products.filter(p =>
301    p.name.toLowerCase().includes(this.filter)
302  );
303}
304```
305 
306---
307 
308## 5. Server-Side Rendering (HIGH)
309 
310### Configure Incremental Hydration
311 
312```typescript
313// app.config.ts
314import {
315  provideClientHydration,
316  withIncrementalHydration,
317} from "@angular/platform-browser";
318 
319export const appConfig: ApplicationConfig = {
320  providers: [
321    provideClientHydration(withIncrementalHydration(), withEventReplay()),
322  ],
323};
324```
325 
326### Defer Non-Critical Content
327 
328```html
329<!-- Critical above-the-fold content -->
330<app-header />
331<app-hero />
332 
333<!-- Below-fold deferred with hydration triggers -->
334@defer (hydrate on viewport) {
335<app-product-grid />
336} @defer (hydrate on interaction) {
337<app-chat-widget />
338}
339```
340 
341### Use TransferState for SSR Data
342 
343```typescript
344@Injectable({ providedIn: "root" })
345export class DataService {
346  private http = inject(HttpClient);
347  private transferState = inject(TransferState);
348  private platformId = inject(PLATFORM_ID);
349 
350  getData(key: string): Observable<Data> {
351    const stateKey = makeStateKey<Data>(key);
352 
353    if (isPlatformBrowser(this.platformId)) {
354      const cached = this.transferState.get(stateKey, null);
355      if (cached) {
356        this.transferState.remove(stateKey);
357        return of(cached);
358      }
359    }
360 
361    return this.http.get<Data>(`/api/${key}`).pipe(
362      tap((data) => {
363        if (isPlatformServer(this.platformId)) {
364          this.transferState.set(stateKey, data);
365        }
366      }),
367    );
368  }
369}
370```
371 
372---
373 
374## 6. Template Optimization (MEDIUM)
375 
376### Use New Control Flow Syntax
377 
378```html
379<!-- CORRECT - New control flow (faster, smaller bundle) -->
380@if (user()) {
381<span>{{ user()!.name }}</span>
382} @else {
383<span>Guest</span>
384} @for (item of items(); track item.id) {
385<app-item [item]="item" />
386} @empty {
387<p>No items</p>
388}
389 
390<!-- WRONG - Legacy structural directives -->
391<span *ngIf="user; else guest">{{ user.name }}</span>
392<ng-template #guest><span>Guest</span></ng-template>
393```
394 
395### Avoid Complex Template Expressions
396 
397```typescript
398// CORRECT - Precompute in component
399class Component {
400  items = signal<Item[]>([]);
401  sortedItems = computed(() =>
402    [...this.items()].sort((a, b) => a.name.localeCompare(b.name))
403  );
404}
405 
406// Template
407@for (item of sortedItems(); track item.id) { ... }
408 
409// WRONG - Sorting in template every render
410@for (item of items() | sort:'name'; track item.id) { ... }
411```
412 
413---
414 
415## 7. State Management (MEDIUM)
416 
417### Use Selectors to Prevent Re-renders
418 
419```typescript
420// CORRECT - Selective subscription
421@Component({
422  template: `<span>{{ userName() }}</span>`,
423})
424class HeaderComponent {
425  private store = inject(Store);
426  // Only re-renders when userName changes
427  userName = this.store.selectSignal(selectUserName);
428}
429 
430// WRONG - Subscribing to entire state
431@Component({
432  template: `<span>{{ state().user.name }}</span>`,
433})
434class HeaderComponent {
435  private store = inject(Store);
436  // Re-renders on ANY state change
437  state = toSignal(this.store);
438}
439```
440 
441### Colocate State with Features
442 
443```typescript
444// CORRECT - Feature-scoped store
445@Injectable() // NOT providedIn: 'root'
446export class ProductStore { ... }
447 
448@Component({
449  providers: [ProductStore], // Scoped to component tree
450})
451export class ProductPageComponent {
452  store = inject(ProductStore);
453}
454 
455// WRONG - Everything in global store
456@Injectable({ providedIn: 'root' })
457export class GlobalStore {
458  // Contains ALL app state - hard to tree-shake
459}
460```
461 
462---
463 
464## 8. Memory Management (LOW-MEDIUM)
465 
466### Use takeUntilDestroyed for Subscriptions
467 
468```typescript
469import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
470 
471@Component({...})
472export class DataComponent {
473  private destroyRef = inject(DestroyRef);
474 
475  constructor() {
476    this.data$.pipe(
477      takeUntilDestroyed(this.destroyRef)
478    ).subscribe(data => this.process(data));
479  }
480}
481 
482// WRONG - Manual subscription management
483export class DataComponent implements OnDestroy {
484  private subscription!: Subscription;
485 
486  ngOnInit() {
487    this.subscription = this.data$.subscribe(...);
488  }
489 
490  ngOnDestroy() {
491    this.subscription.unsubscribe(); // Easy to forget
492  }
493}
494```
495 
496### Prefer Signals Over Subscriptions
497 
498```typescript
499// CORRECT - No subscription needed
500@Component({
501  template: `<div>{{ data().name }}</div>`,
502})
503export class Component {
504  data = toSignal(this.service.data$, { initialValue: null });
505}
506 
507// WRONG - Manual subscription
508@Component({
509  template: `<div>{{ data?.name }}</div>`,
510})
511export class Component implements OnInit, OnDestroy {
512  data: Data | null = null;
513  private sub!: Subscription;
514 
515  ngOnInit() {
516    this.sub = this.service.data$.subscribe((d) => (this.data = d));
517  }
518 
519  ngOnDestroy() {
520    this.sub.unsubscribe();
521  }
522}
523```
524 
525---
526 
527## Quick Reference Checklist
528 
529### New Component
530 
531- [ ] `changeDetection: ChangeDetectionStrategy.OnPush`
532- [ ] `standalone: true`
533- [ ] Signals for state (`signal()`, `input()`, `output()`)
534- [ ] `inject()` for dependencies
535- [ ] `@for` with `track` expression
536 
537### Performance Review
538 
539- [ ] No methods in templates (use pipes or computed)
540- [ ] Large lists virtualized
541- [ ] Heavy components deferred
542- [ ] Routes lazy-loaded
543- [ ] Third-party libs dynamically imported
544 
545### SSR Check
546 
547- [ ] Hydration configured
548- [ ] Critical content renders first
549- [ ] Non-critical content uses `@defer (hydrate on ...)`
550- [ ] TransferState for server-fetched data
551 
552---
553 
554## Resources
555 
556- [Angular Performance Guide](https://angular.dev/best-practices/performance)
557- [Zoneless Angular](https://angular.dev/guide/experimental/zoneless)
558- [Angular SSR Guide](https://angular.dev/guide/ssr)
559- [Change Detection Deep Dive](https://angular.dev/guide/change-detection)
560