liminfoAngular Reference
Free reference guide: Angular Reference
About Angular Reference
The Angular Reference is a searchable cheat sheet covering the most important Angular APIs and patterns organized into six categories: Components (@Component decorator, @Input/@Output, lifecycle hooks, template references, content projection), Services (@Injectable, HttpClient, Observable/RxJS operators, Subject/BehaviorSubject), Directives (*ngIf, *ngFor, [ngClass]/[ngStyle], custom directives, ngSwitch), Pipes (built-in pipes like date/currency/uppercase, the async pipe, and custom pipe creation), Routing (RouterModule configuration, ActivatedRoute parameters, canActivate guards, routerLink), and Forms (template-driven, reactive, FormBuilder, custom validators, FormArray for dynamic fields).
This reference is used by Angular developers at all experience levels — from developers learning the framework for the first time to senior engineers who need a quick lookup for an infrequently used API. The TypeScript examples follow current Angular conventions: services use providedIn: "root" for tree-shakable injection, reactive forms use FormGroup and FormControl with validator arrays, and RxJS examples show the pipe() operator chain pattern with debounceTime, distinctUntilChanged, switchMap, and catchError.
The reference is organized to reflect the natural learning path in Angular. Components come first as the fundamental building block, followed by Services which decouple business logic. Directives and Pipes extend the template language. Routing enables multi-view applications, and Forms handle user input. Each entry shows the actual TypeScript or template syntax alongside a complete code example that demonstrates common real-world usage — for example, the canActivate guard example shows the full auth check pattern with redirect to /login.
Key Features
- Six searchable categories: Components, Services, Directives, Pipes, Routing, Forms
- @Component with @Input/@Output, EventEmitter, template references (@ViewChild), and content projection (ng-content)
- @Injectable service with HttpClient for GET/POST requests and Observable subscription patterns
- RxJS operator chain: debounceTime, distinctUntilChanged, switchMap, catchError in a search pattern
- BehaviorSubject state management pattern for sharing state across components
- Structural directives: *ngIf with else templates, *ngFor with trackBy, ngSwitch with default case
- Reactive forms with FormGroup, FormControl, Validators, FormArray for dynamic fields, and cross-field custom validators
- canActivate route guard with auth service check and Router.navigate redirect pattern
Frequently Asked Questions
What Angular categories does this reference cover?
The reference covers six categories: Components (decorators, input/output, lifecycle hooks, template references, content projection), Services (HttpClient, Observables, RxJS, BehaviorSubject), Directives (*ngIf, *ngFor, ngClass, custom directives, ngSwitch), Pipes (date, currency, async, custom pipes), Routing (routes config, ActivatedRoute, canActivate guards, routerLink), and Forms (template-driven, reactive, FormBuilder, validators, FormArray).
What is the difference between template-driven and reactive forms?
Template-driven forms define form structure in the HTML template using NgModel and ngForm directives — they are simpler but harder to test. Reactive forms define the form model in TypeScript using FormGroup and FormControl, giving full programmatic control, easier unit testing, and support for dynamic form fields via FormArray.
How do @Input and @Output work for component communication?
@Input() allows a parent component to pass data down to a child component as a property binding: <app-child [label]="myLabel">. @Output() with EventEmitter allows the child to send events up to the parent: <app-child (clicked)="handleClick()">. This is the standard Angular parent-child communication pattern.
What is the async pipe and when should I use it?
The async pipe subscribes to an Observable or Promise and returns the latest emitted value, automatically unsubscribing when the component is destroyed. Use it in templates with *ngIf="data$ | async as data" or *ngFor="let item of items$ | async" to avoid manual subscription management and prevent memory leaks.
How does the canActivate route guard work?
canActivate is an interface implemented by a service. The canActivate() method returns a boolean (or Observable/Promise of boolean). If it returns false, navigation is cancelled. The typical pattern is to check an auth service and redirect to /login if the user is not authenticated, then return false to prevent the route from activating.
What is the difference between Subject and BehaviorSubject?
A Subject only emits values to subscribers that subscribed after the emission — late subscribers miss previous values. A BehaviorSubject requires an initial value and always emits the most recent value to new subscribers immediately upon subscription. BehaviorSubject is preferred for state management because components can always read the current state.
How do I implement a custom pipe in Angular?
Create a class decorated with @Pipe({ name: "pipeName" }) that implements PipeTransform. The transform(value, ...args) method receives the input value and optional arguments and returns the transformed output. Register the pipe in a module or mark it as standalone, then use it in templates as {{ text | pipeName:arg }}.
How does the RxJS switchMap operator help with search inputs?
switchMap cancels the previous inner Observable when a new value arrives. In a search pattern: the input text stream is piped through debounceTime (to wait for the user to stop typing), distinctUntilChanged (to skip duplicate values), and switchMap (to cancel previous HTTP requests and start a new one). This prevents race conditions where an earlier response arrives after a later one.