Angular Cheat Sheet

Installation

Generate Schematics

Project Structure (Standalone — v17+ Default)

Angular Architecture

Components — UI building blocks with template + logic
Services — Shared business logic / data via DI
Directives — Extend HTML behavior (structural / attribute)
Pipes — Transform display values in templates
Guards — Control route access
Interceptors — Middleware for HTTP requests
Resolvers — Pre-fetch data before route activates

Change Detection

Default — checks entire tree on any event / timer / XHR
OnPush — only checks when Input changes, event fires in component, async pipe resolves, or <code>markForCheck()</code> called
Signals — fine-grained reactivity, skips zone.js entirely
Zoneless — <code>provideExperimentalZonelessChangeDetection()</code> (v18+)

Always prefer OnPush for performance-sensitive components.

Data Flow

⬇️ Input binding — parent → child via <code>[prop]</code>
⬆️ Output / EventEmitter — child → parent via <code>(event)</code>
↔️ Two-way — <code>[(ngModel)]</code> / <code>[(signal)]</code>
🔗 Service + Observable — cross-component via RxJS BehaviorSubject
⚡ Signals — reactive state without RxJS
📡 Content projection — <code><ng-content></code>

Standalone Component (v17+) 🔥 Default

Input / Output Aliases & Transforms

ViewChild & ContentChild

Content Projection

Host Binding & Host Listener

Bootstrap (Standalone App)

Binding Syntax

Control Flow (v17+ @syntax) 🔥 New

Legacy Structural Directives

Template Variables & ng-template

Async Pipe ⭐ Preferred

@defer — Lazy Loading Blocks 🔥 v17+

Custom Attribute Directive

Built-in Directives Quick Ref

⚠️ ngModel requires FormsModule or ReactiveFormsModule in imports.

Built-in Pipes

Custom Pipe

💡 Pure pipe: only re-evaluated when reference changes. Impure (pure: false): re-evaluates every CD cycle — use sparingly.

Service with providedIn ⭐ Preferred

DI Tokens & Providers

Interceptors (Functional — v15+) 🔥

Scoped Providers

NgModule (Legacy)

Standalone (v17+ Default) 🔥 Preferred

💡 Mix allowed: standalone components can be used inside NgModules and vice-versa.

Execution Order

Route Definitions

Guards (Functional — v15+) 🔥

Navigation & Params

Router Outlet & Events

Reactive Forms ⭐ Preferred

Form HTML Binding

Validators & Custom Validators

Form State Properties

HttpClient

Essential RxJS Operators

Search with Debounce Pattern

Resource API — v19+ 🆕

Signal Primitives 🔥 v16+

RxJS ↔ Signals Interop

💡 toSignal auto-unsubscribes when the injection context is destroyed.

linkedSignal — v19+ 🆕

Signals in Templates

🔥 OnPush Strategy

⭐ trackBy / track

Lazy Loading

Pure Pipes

Signals vs RxJS

Signals — synchronous, simple state
RxJS — async streams, complex pipelines
Use <code>toSignal()</code> to bridge between them
Signals skip zone.js overhead
No manual unsubscribe with signals

Other Tips

Use <code>AsyncPipe</code> — auto-unsubscribes
<code>takeUntilDestroyed()</code> for subscription cleanup
Avoid function calls in templates (re-evaluated every CD)
Use <code>NgOptimizedImage</code> for images
Enable <code>withPreloading()</code> for route preloading
SSR with <code>@angular/ssr</code> for faster FCP

Component Unit Test

Service Test with Mock

🔥 Top Interview Questions

What is Change Detection? — Angular's mechanism to sync DOM with data. Default checks entire tree; OnPush optimizes this.
Difference: Observable vs Promise? — Observable is lazy, cancellable, multi-value, composable. Promise is eager, one-value, not cancellable.
switchMap vs mergeMap? — switchMap cancels prev (search), mergeMap runs all in parallel (uploads).
What is Zone.js? — Monkey-patches async APIs to trigger change detection automatically.
Subject vs BehaviorSubject? — BehaviorSubject has initial value, replays last to new subscribers.
What are Signals? — Fine-grained reactive primitives that skip zone.js for updates.
ngOnChanges vs ngOnInit? — ngOnChanges fires before init and on every Input change; ngOnInit fires once after first ngOnChanges.

⚠️ Common Gotchas

🔥 Forgetting to unsubscribe — memory leak! Use <code>takeUntilDestroyed()</code>, <code>async</code> pipe, or <code>ngOnDestroy</code>.
🔥 Mutating objects with OnPush — Angular won't detect it. Always return new references.
🔥 Function calls in templates — called on every CD cycle. Use pipes or computed signals instead.
*ngIf vs [hidden] — <code>*ngIf</code> destroys/recreates DOM. <code>[hidden]</code> just hides with CSS.
Missing trackBy — entire list re-renders on every change. Always track by id.
Circular dependency in DI — use <code>forwardRef()</code> to resolve.
ExpressionChangedAfterItHasBeenChecked — modifying state in <code>ngAfterViewInit</code>. Use <code>setTimeout(0)</code> or <code>ChangeDetectorRef.detectChanges()</code>.

⭐ Quick Comparison Tables