Angular Reference

@Component({ selector, template, styles })

Decorator that marks a class as an Angular component with metadata for template, styles, and selector.

@Input() propertyName: Type

Decorator that marks a class property as an input binding, allowing parent components to pass data.

@Output() eventName = new EventEmitter<Type>()

Decorator that marks a property as an output event that the component can emit to its parent.

ngOnInit(): void / ngOnDestroy(): void

Lifecycle hooks called after data-bound properties are set (init) and before the component is destroyed.

@ViewChild(selector) prop: ElementRef

Access a child component, directive, or DOM element from the component class.

<ng-content select="selector"></ng-content>

Project external content into a component template using slots.

@Injectable({ providedIn: 'root' })

Decorator that marks a class as injectable and optionally registers it with the root injector.

const service = inject(ServiceToken)

Functional API to inject a dependency in components, directives, or other injectables (Angular 14+).

new InjectionToken<Type>('description')

Create a typed token for non-class dependencies (e.g. config objects, API URLs).

this.http.get<T>(url, options)

Service for making HTTP requests. Returns Observables. Must import HttpClientModule.

provideHttpClient(withInterceptors([...]))

Standalone provider function for HttpClient (Angular 15+). Replaces HttpClientModule.

*ngIf="condition; else elseRef"

Structural directive that conditionally renders elements. Removes/adds from the DOM.

*ngFor="let item of items; trackBy: trackFn"

Structural directive that repeats a template for each item in a collection.

@for (item of items; track item.id) { }

Built-in control flow block (Angular 17+). Replaces *ngFor with better performance.

@if (cond) { } @else if (cond) { } @else { }

Built-in control flow block (Angular 17+). Replaces *ngIf with cleaner syntax.

@switch (expr) { @case (val) { } @default { } }

Built-in control flow block (Angular 17+). Replaces ngSwitch directives.

[ngClass]="expr" [ngStyle]="expr"

Attribute directives that dynamically apply CSS classes or inline styles.

{{ value | date:'format' }}

Formats a date value according to locale rules and a format string.

{{ observable$ | async }}

Subscribes to an Observable or Promise, returns the latest value, and unsubscribes on destroy.

{{ value | json }}

Converts a value to a JSON string. Useful for debugging object values in templates.

{{ val | currency:'USD' }} {{ val | number:'1.2-2' }}

Locale-aware number formatting pipes for currency, decimals, and percentages.

@Pipe({ name: 'pipeName', standalone: true })

Create a reusable transformation pipe. Must implement PipeTransform interface.

provideRouter(routes, withFeatures(...))

Standalone provider function for the Angular router (replaces RouterModule).

<a routerLink="/path"> <router-outlet />

Directive for declarative navigation and placeholder for routed component rendering.

inject(ActivatedRoute).params

Service that provides access to route parameters, query params, and route data.

canActivate: [() => inject(AuthService).isLoggedIn()]

Functional guards (Angular 15+) that control route activation, deactivation, and data resolution.

loadComponent: () => import('./path').then(m => m.Comp)

Dynamically load routes or components to reduce initial bundle size.

pipe(map(val => transform(val)))

Transform each emitted value using a projection function.

pipe(switchMap(val => innerObs$))

Map each value to an Observable, subscribing to the latest and cancelling previous inner subscriptions.

combineLatest([obs1$, obs2$])

Combine the latest values from multiple Observables. Emits when any source emits.

pipe(takeUntilDestroyed(destroyRef))

Automatically unsubscribe when the component is destroyed (Angular 16+). Replaces manual unsubscribe patterns.

pipe(catchError(err => fallback$))

Handle errors in an Observable chain. Must return a new Observable or rethrow.

new BehaviorSubject<Type>(initial)

Multicasting Observables. BehaviorSubject holds the current value and emits it to new subscribers.

new FormGroup({ key: new FormControl(value) })

Core building blocks for reactive forms. FormGroup tracks the state of a group of FormControl instances.

this.fb.group({ key: [value, validators] })

Shorthand service for creating FormGroup, FormControl, and FormArray instances.

new FormArray([control1, control2])

Tracks an array of AbstractControl instances. Useful for dynamic lists of form fields.

Validators.required | .email | .min(n) | .pattern(regex)

Built-in validators for form controls. Can compose multiple validators in an array.

(control: AbstractControl): ValidationErrors | null

Create reusable validation functions. Return null for valid, or an error object for invalid.

const name = signal<Type>(initialValue)

Create a reactive signal (Angular 16+). Read by calling the signal function, write with .set() or .update().

const derived = computed(() => expr)

Create a read-only signal derived from other signals. Automatically tracks dependencies.

effect(() => { /* read signals here */ })

Run a side effect whenever tracked signals change. Automatically cleaned up on destroy.

name = input<Type>(default) / clicked = output<Type>()

Signal-based input and output declarations (Angular 17.1+). Replaces @Input() and @Output() decorators.

toSignal(obs$) / toObservable(sig)

Bridge between RxJS Observables and Signals. Convert in either direction.

linkedSignal(() => sourceSignal())

Create a writable signal that resets to a computed value when dependencies change (Angular 19+).