Short notes & TIL

Angular v22 ships @boundary — a template-level error boundary that catches render failures in a subtree and shows a fallback instead of crashing the whole view.

@boundary {
<app-heavy-widget [data]="data()" />
} @error {
<p class="error">Widget failed to render.</p>
}

Works like React’s error boundaries but lives in the template syntax. Especially useful in micro frontend shells where one failing component would otherwise take down the entire page.

linkedSignal creates a writable signal that resets whenever its source changes — useful for local state that derives from an input.

readonly page = input(1)
readonly currentPage = linkedSignal(() => this.page())

// currentPage can be mutated locally.
// When page() changes, currentPage resets to that new value.

The alternative — effect(() => this.currentPage.set(this.page())) — works but makes the dependency implicit and runs a tick later. linkedSignal is synchronous and self-documenting.

Angular v22 allows arrow functions directly in templates — no more extracting single-use handlers into the component class.

<!-- Before v22 -->
<button (click)="onSave()">Save</button>

<!-- v22+ -->
<button (click)="() => store.save(item())">Save</button>

Keep them short. If the logic grows, move it to the class — the template should express intent, not implementation.

httpResource replaces the service + Subject pattern for simple HTTP calls. Loading state, errors, and the response are all signals — no RxJS pipe needed.

readonly user = httpResource<User>('/api/user/42')

// user.value()     — the response (or undefined while loading)
// user.isLoading() — boolean
// user.error()     — any thrown error

For mutations, stick with HttpClient directly. httpResource is read-only by design.

Angular’s @let declares a local variable directly in the template — no extra component property or as-alias on a pipe needed.

@let user = currentUser();

<p>{{ user.name }}</p>
<app-avatar [src]="user.avatar" />

Useful whenever a signal or async result is referenced more than once in a template block. Without @let, the expression would be re-evaluated on every access.