Templates & Binding — Series 3

Preview — 3 of 10 questions

How many times does 'recomputing' get logged?

javascript

const price = signal(10);
const qty = signal(2);
const total = computed(() => {
  console.log('recomputing');
  return price() * qty();
});

console.log(total()); // read #1
console.log(total()); // read #2, no signal changed in between

AOnce — computed() memoizes its result and only recomputes when one of the signals it read (price or qty) actually changes

BTwice — once per call to total()

CZero times — computed() is lazy and never runs unless subscribed to explicitly

DIt depends on whether the component uses OnPush

Assume this code runs in a component constructor, before its first change-detection pass: What is the logging order?

javascript

const count = signal(0);
effect(() => console.log('count is', count()));
count.set(1);
console.log('after set');

Acount is 0, after set, count is 1 — the first effect run happens immediately and the update schedules another run

Bafter set, count is 1 — the first effect run is deferred until change detection, when it reads the latest signal value

Ccount is 0, count is 1, after set — both effect runs happen inline

Dafter set, count is 0 — the first run uses the value captured when effect() was created

Why is the touched check there?

javascript

form = this.fb.group({
  email: ['', Validators.required],
});

<input formControlName="email">
<p *ngIf="form.get('email')?.invalid && form.get('email')?.touched">
  Email is required
</p>

AIt has no effect — invalid alone would show the same thing

Btouched is required syntax for every Reactive Forms validation message

Ctouched disables the input while false

DWithout it, the error would show immediately on page load, before the user has had a chance to type anything — touched becomes true only after the control has been focused and blurred at least once

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