Templates & Binding — Series 2

Preview — 3 of 10 questions

What changes when this component moves to the signal-based input API?

javascript

// Before
@Input({ required: true }) heroId!: string;

// After
heroId = input.required<string>();

ANothing but syntax — heroId is still a plain string property

BheroId becomes a read-only signal: templates and computed() read it as heroId(), and reading it inside a computed/effect registers a dependency, so derived state updates without ngOnChanges

CThe input becomes two-way bindable

DThe input can now only be set once, at construction

What does model() give you that input() does not?

javascript

value = model<string>('');

AA writable signal that also emits to the parent, enabling [(value)] two-way binding — it is input() plus a matching valueChange output

BA signal that persists to localStorage between sessions

CA signal that is only readable in templates, not in the class

DNothing extra; it is an alias kept for backwards compatibility

When is inputEl() first non-undefined?

javascript

inputEl = viewChild<ElementRef<HTMLInputElement>>('box');

AIn the constructor, because signal queries resolve eagerly

BNever in a standalone component — signal queries need static: true

COnly inside ngAfterViewChecked

DAfter the view has been created — so in ngAfterViewInit, or in an effect(), which re-runs when the query result changes

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