Components

Overview

Components are the fundamental building blocks of Angular applications. Each component encapsulates its own template, logic, and styles into a self-contained, reusable unit. This section covers everything from basic component creation to advanced patterns in Angular 18+.

Available Pages

Fundamentals — Anatomy of a component, creating with CLI, selectors, and styling
Inputs, Outputs & Two-Way Binding — Signal inputs, function-based outputs, and model inputs
Templates & Control Flow — Built-in @if, @for, @switch syntax
Lifecycle Hooks — ngOnInit, ngOnDestroy, DestroyRef, afterNextRender
Content Projection — Single-slot and multi-slot <ng-content /> patterns
Dynamic Components — ViewContainerRef, NgComponentOutlet, lazy-loading, CDK Portals
Signals & Reactivity — Signals, computed, effects, view queries, and OnPush
Standalone vs NgModules — Architecture comparison, migration, and interoperability
Angular 20 Features — New APIs, advantages, disadvantages, and adoption guide

Quick Summary — Legacy vs Modern Syntax

Feature	Legacy Syntax	Modern Syntax (Angular 18+)
Inputs	`@Input() name: string`	`name = input<string>()`
Required inputs	`@Input({ required: true })`	`name = input.required<string>()`
Outputs	`@Output() event = new EventEmitter()`	`event = output<T>()`
Two-way binding	`@Input()` + `@Output()` pair	`value = model<T>()`
View queries	`@ViewChild()` / `@ViewChildren()`	`viewChild()` / `viewChildren()`
Content queries	`@ContentChild()` / `@ContentChildren()`	`contentChild()` / `contentChildren()`
Conditionals	`*ngIf`	`@if`
Loops	`*ngFor`	`@for (item of items; track item.id)`
Switch	`[ngSwitch]`	`@switch`
Standalone	`standalone: true`	Default (flag not needed)
Bootstrapping	`bootstrapModule(AppModule)`	`bootstrapApplication(AppComponent, appConfig)`
Lazy loading	`loadChildren: () => Module`	`loadComponent: () => Component`
Async data	Manual HTTP + subscribe	`resource()` / `rxResource()`
Zone	`zone.js` (implicit)	Zoneless with `provideExperimentalZonelessChangeDetection()`

Best Practices

Keep components focused — Each component should have a single responsibility.
Use signal inputs/outputs — Prefer input(), output(), and model() over decorators.
Always use OnPush — Better performance and predictable change detection.
Use descriptive selectors — Prefer app-user-card over app-uc.
Prefer external templates and styles — Better maintainability for larger components.
Clean up resources — Use DestroyRef or ngOnDestroy to free subscriptions/timers.
Leverage the CLI — Always use ng generate component for consistent file structure.
Use track in @for loops — Always provide a tracking expression for performance.
Test dynamic components — Verify dynamically loaded components render correctly.
Use content projection — Build flexible, reusable container components.

Components

Overview

Available Pages

Quick Summary — Legacy vs Modern Syntax

Best Practices

References