Quick Reference

Angular CLI & Signals Professional

The essence of modern Angular development. From Signals to the @defer block.

🛠️ CLI Essentials

Component (Minimal)Inline styles, inline template, and no test file.

ng g c components/name -s -t --skip-tests

Create ServiceCreates a new singleton service.

ng g s services/auth

Create DirectiveCreates a new attribute or structural directive.

ng g d directives/highlight

Create PipeCreates a new pipe for data transformation.

ng g p pipes/format-date

Build for ProductionOptimizes the application (AOT, minification).

ng build

Different PortStarts the dev server on a specific port.

ng serve --port 4201

🚦 Signal Core & Interop

Writable SignalA signal that can be changed with .set() or .update().

count = signal(0);

Computed (Read-only)Reactively recalculates values when dependencies change.

double = computed(() => this.count() * 2);

EffectExecutes side effects (e.g., logging or API calls).

effect(() => console.log(this.count()));

Signal from ObservableConverts an observable to a signal (RxJS interop).

data = toSignal(this.api.getData$());

Observable from SignalConverts a signal back to an observable.

data$ = toObservable(this.mySignal);

🔌 Component & Data Flow

Required InputForces the parent to provide a value.

id = input.required<string>();

Optional InputAn input with a default value.

label = input("Default");

Model (Two-Way)Enables bidirectional binding (banana-in-a-box).

value = model("");

View Child (Signal)The modern replacement for @ViewChild.

header = viewChild<ElementRef>("header");

Content Child (Signal)Accesses projected content (ng-content).

item = contentChild(MyComp);

🏗️ Template Control Flow

@if / @elseThe new, performant alternative to *ngIf.

@if (user.isAdmin) { ... } @else { ... }

@for (Loop)Replaces *ngFor – "track" is now required and ensures speed.

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

@switchClean control flow directly in the template.

@switch (status) { @case ("a") { ... } }

@defer (Lazy Loading)Loads components only when they become visible!

@defer (on viewport) { <large-comp /> }

💡

With the new @defer block, you can significantly reduce your app's loading time by lazily loading heavy components only when needed (e.g., on scroll).