angular-patterns

Angular 22+ Patterns - Detailed Reference

This document provides detailed patterns and examples for Angular 22+ development in the Fundamental NGX project.

Table of Contents

• Signal Inputs, Outputs, and Models
• Computed Signals
• LinkedSignal - Mutable Derived State
• Effects
• Host Bindings
• Queries
• Render Lifecycle Hooks
• Resource API (Experimental)
• Migrating from CssClassBuilder
• Component Member Ordering

---

Signal Inputs, Outputs, and Models

input() - Read-only signal inputs

// Optional with default value
readonly name = input<string>('');

// Required input (throws if not provided)
readonly id = input.required<string>();

// With transform function
readonly count = input(0, { transform: numberAttribute });
readonly disabled = input(false, { transform: booleanAttribute });

// Reading the value (call like a function)
const currentName = this.name();

output() - Event emitters

// Define outputs
readonly clicked = output<MouseEvent>();
readonly valueChange = output<string>();
readonly closed = output<void>();

// Emit events
this.clicked.emit(event);
this.valueChange.emit('new value');
this.closed.emit();

model() - Two-way binding

// Optional with default
readonly value = model<number>(0);

// Required model
readonly selected = model.required<boolean>();

// Update model value
this.value.set(10);
this.value.update(v => v + 1);

// In parent template:
<child [(value)]="parentValue" />

---

Computed Signals

Basic Usage

protected readonly fullName = computed(() =>
    `${this.firstName()} ${this.lastName()}`
);

// Multiple dependencies
protected readonly total = computed(() =>
    this.price() * this.quantity()
);