angular-best-practices

Angular Best Practices

Critical rules (non-obvious)

• Always unsubscribe from Observables in ngOnDestroy — use takeUntilDestroyed() (Angular 16+) or Subject + takeUntil
• ChangeDetectionStrategy.OnPush: component only updates when input reference changes or async pipe emits — use for all leaf components
• Never mutate input objects/arrays: OnPush won't detect mutation; create new reference instead
• trackBy is mandatory on *ngFor with dynamic lists — without it, every change re-renders all DOM nodes
• async pipe auto-unsubscribes — prefer it over manual subscription in templates

Component with OnPush + signals (Angular 17+)

@Component({
  selector: "app-product-list",
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (product of products(); track product.id) {
      <app-product-card [product]="product" />
    }
    @if (loading()) { <app-spinner /> }
  `,
})
export class ProductListComponent {
  products = input.required<Product[]>();
  loading = input(false);

  // Computed signal
  total = computed(() => this.products().length);
}

Service with signals store pattern

@Injectable({ providedIn: "root" })
export class CartService {
  private _items = signal<CartItem[]>([]);

  items = this._items.asReadonly();
  total = computed(() => this._items().reduce((sum, i) => sum + i.price * i.qty, 0));

  addItem(item: CartItem) {
    this._items.update(items =>
      items.some(i => i.id === item.id)
        ? items.map(i => i.id === item.id ? { ...i, qty: i.qty + 1 } : i)
        : [...items, { ...item, qty: 1 }]
    );
  }
}

HTTP with interceptors

// auth interceptor
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  if (!token) return next(req);
  return next(req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })).pipe(
    catchError(err => {
      if (err.status === 401) inject(Router).navigate(["/login"]);
      return throwError(() => err);
    })
  );
};

// Register in app.config.ts
provideHttpClient(withInterceptors([authInterceptor]))