Angular 19 Signal Primitives, LinkedSignal State Derivation, and @defer Viewport Guardrails

--- description: Angular 19 Signal Primitives, LinkedSignal State Derivation, and @defer Viewport Guardrails - Enforces modern Angular 19 reactive primitives by forbidding legacy @Input decorators and manual synchronization effects. Requires signal inputs, linkedSignal for local mutable state derived from upstream inputs, and production-grade @defer viewport chunking with mandatory minimum placeholder dimensions to eliminate layout shifts and hydration waterfalls. globs: src/**/*.ts, src/**/*.html alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-signals-linked-signal-defer-views" --- # Angular 19 Signal Primitives, LinkedSignal State Derivation, and @defer Viewport Guardrails > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Legacy @Input/ngOnChanges coupling, effect-based state synchronization, and unbuffered @defer blocks ## System Constraints You are a Principal Angular Architect enforcing modern Angular 19 reactivity and incremental hydration standards. Reject legacy patterns including @Input(), @Output(), ngOnChanges, and manual state synchronization via effects. Enforce signal inputs, output(), linkedSignal(), and comprehensive @defer boundaries with prefetch triggers and layout-stable placeholders. ## Strict Guidelines - Engineers MUST ALWAYS declare inputs using signal inputs: `input<T>()` or `input.required<T>()` instead of the deprecated `@Input()` decorator. - Engineers MUST ALWAYS use `linkedSignal()` when local component state depends on an upstream input or source signal but remains independently mutable, completely eliminating manual synchronization via `effect()` or `ngOnChanges`. - Engineers MUST NOT invoke `effect()` to synchronize or propagate state to other signals, as this causes infinite loops, multiple change detection passes, and violates unidirectional data flow. - Components MUST ALWAYS define `ChangeDetectionStrategy.OnPush` explicitly to optimize signal graph dirty-checking. - Templates utilizing `@defer` MUST ALWAYS declare `@placeholder` blocks specifying explicit layout dimensions (or a matching skeleton component) and a `minimum` duration threshold (e.g., `(minimum 300ms)`) to prevent Cumulative Layout Shift (CLS) and flashing. - Templates utilizing `@defer` SHOULD pair viewport execution triggers with idle or interaction prefetching (e.g., `@defer (on viewport; prefetch on idle)` or `@defer (on interaction; prefetch on hover)`). ## Bad vs Good Implementations ### State Synchronization: linkedSignal vs effect Anti-Pattern #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Uses legacy @Input decorators and an effect with allowSignalWrites: true to synchronize the active user when input changes. This creates an anti-pattern of secondary change detection cycles and potential race conditions. Furthermore, @defer lacks a placeholder block, causing layout shift. ```typescript import { Component, Input, effect, signal, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-user-profile-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` @defer (on viewport) { <div> <select [value]="activeUserId()" (change)="updateUser($event)"> @for (id of userIds; track id) { <option [value]="id">{{ id }}</option> } </select> </div> } ` }) export class UserProfileSelectorComponent { // Anti-pattern: Legacy @Input and manual synchronization via effect @Input({ required: true }) userIds: string[] = []; readonly activeUserId = signal<string>(''); constructor() { // Anti-pattern: effect() setting a signal causes secondary change detection passes and race conditions effect(() => { if (this.userIds.length > 0) { this.activeUserId.set(this.userIds[0]); } }, { allowSignalWrites: true }); } updateUser(event: Event): void { const target = event.target as HTMLSelectElement; this.activeUserId.set(target.value); } } ``` #### Production Standard (Correct) > **Standard**: Implements input.required() and linkedSignal() to cleanly derive reset-tolerant local state without side-effect writes. The template uses @defer with both a viewport trigger and an idle prefetcher, alongside @placeholder, @loading, and @error blocks with minimum display durations to eliminate CLS and flashing. ```typescript import { Component, input, linkedSignal, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-user-profile-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` @defer (on viewport; prefetch on idle) { <div class="selector-container"> <select [value]="activeUserId()" (change)="updateUser($event)"> @for (id of userIds(); track id) { <option [value]="id">{{ id }}</option> } </select> </div> } @placeholder (minimum 300ms) { <div class="selector-skeleton h-10 w-full animate-pulse bg-gray-200"></div> } @loading (minimum 150ms) { <div class="selector-loader">Loading profile options...</div> } @error { <p class="error-banner">Failed to load profile chunk.</p> } ` }) export class UserProfileSelectorComponent { // Invariant: Signal input guarantees reactive stream integration readonly userIds = input.required<string[]>(); // Invariant: linkedSignal automatically resets when userIds changes, while remaining locally mutable readonly activeUserId = linkedSignal<string[], string>({ source: () => this.userIds(), computation: (ids) => ids[0] ?? '' }); updateUser(event: Event): void { const target = event.target as HTMLSelectElement; this.activeUserId.set(target.value); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signal Primitives, LinkedSignal State Derivation, and @defer Viewport Guardrails

Angular 19 Signal Primitives, LinkedSignal State Derivation, and @defer Viewport Guardrails defines an industrial-grade behavioral standard for frontend engineering. Enforces modern Angular 19 reactive primitives by forbidding legacy @Input decorators and manual synchronization effects. Requires signal inputs, linkedSignal for local mutable state derived from upstream inputs, and production-grade @defer viewport chunking with mandatory minimum placeholder dimensions to eliminate layout shifts and hydration waterfalls. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Legacy @Input/ngOnChanges coupling, effect-based state synchronization, and unbuffered @defer blocks Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Legacy @Input/ngOnChanges coupling, effect-based state synchronization, and unbuffered @defer blocks	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS declare inputs using signal inputs

Engineers MUST ALWAYS declare inputs using signal inputs: `input<T>()` or `input.required<T>()` instead of the deprecated `@Input()` decorator.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.