Signals & Deferrable — Series 3

Preview — 3 of 10 questions

Why is { transform: numberAttribute } needed here?

javascript

export class PaginatorComponent {
  pageSize = input(10, { transform: numberAttribute });
}

AWithout it, pageSize() would hold the literal string "25" rather than the number 25, since a plain HTML attribute is always a string — numberAttribute is a built-in transform function that coerces the incoming value to a number before it's stored in the signal

BIt's purely cosmetic and only affects what shows up in Angular DevTools

Ctransform is required syntax for every signal input, regardless of type

DIt converts pageSize into a two-way bindable model() input

What is the effect of having two separate trigger clauses here?

javascript

@defer (on viewport; prefetch on idle) {
  <heavy-widget />
} @placeholder {
  <div class="skeleton"></div>
}

AThis is invalid syntax — @defer only accepts one trigger

Bprefetch on idle is ignored; only the last trigger (on viewport) has any effect

C<heavy-widget>'s code is downloaded early, as soon as the browser is idle (the prefetch trigger), but it is only actually instantiated and rendered later, once the block scrolls into the viewport (the render trigger) — decoupling "when to fetch the code" from "when to show the component"

DBoth triggers must fire simultaneously before anything happens

Why is this specific pattern a hydration hazard in an SSR app?

javascript

@if (typeof window !== 'undefined' && window.innerWidth > 768) {
  <desktop-nav />
} @else {
  <mobile-nav />
}

AThe server (where window is undefined) and the browser (where window.innerWidth has a real value) can produce different branches — the server always renders <mobile-nav>, while the browser might render <desktop-nav> — so the DOM structure Angular tries to hydrate doesn't match what the server actually sent, which is exactly the mismatch hydration depends on not happening

Btypeof window checks are always false at runtime in Angular, so <mobile-nav> renders unconditionally

C@if/@else cannot be used with any expression that references global browser objects

DThis only matters for *ngIf, not the new @if control-flow syntax

Answer all 10 questions (7 more), see explanations for every answer, and track your score.