Roadmap › 4. Frontend › Step 48

Angular (2 → 21)

Angular CLI, standalone components, templates and new control flow, data binding, directives and pipes, signals, services and DI, routing and guards, forms, HttpClient and interceptors, RxJS, change detection and zoneless, lifecycle hooks, state management, testing and performance.

Quick revision for interview day. Print it or save it as a PDF.

CLI

ng new · ng serve · ng g c|s|p|d|g · ng build · ng test · ng add · ng update.

Bindings

{{ }} · [prop] · (event) · [(ngModel)] · [class.x] · [style.x] · [attr.x].

Control flow (v17+)

@if / @else · @for (x of xs; track x.id) {} @empty {} · @switch / @case · @defer (on viewport) · @let.

Signals

signal() · computed() · effect() · linkedSignal() · resource() · input() · output() · model() · viewChild() · toSignal() / toObservable().

Lifecycle

constructor → ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit/Checked → ngAfterViewInit/Checked → ngOnDestroy.

RxJS

switchMap (cancel) · mergeMap (parallel) · concatMap (sequential) · exhaustMap (ignore while busy) · debounceTime · distinctUntilChanged · catchError · retry · forkJoin · combineLatest · shareReplay · takeUntilDestroyed · BehaviorSubject.

Routing

provideRouter(routes) · loadComponent / loadChildren · guards CanActivateFn / CanMatchFn / CanDeactivateFn · ResolveFn · routerLink · <router-outlet />.

Forms

Template-driven (ngModel) vs Reactive (FormGroup, FormControl, FormArray, Validators, typed) · Signal Forms (v21, experimental).

Performance

OnPush · signals · zoneless · lazy routes · @defer · track · virtual scroll · SSR + hydration · NgOptimizedImage · no functions in templates.

Versions

2 (2016) · 9 Ivy · 14 standalone · 16 signals · 17 control flow + @defer · 19 standalone default · 20 stable signals · 21 zoneless default + Vitest · major every 6 months, 18-month support.