Signals & Deferrable

Preview — 3 of 10 questions

What is the difference between @Input() value: string and input<string>() signal inputs?

javascript

import { input, output, model } from '@angular/core';

@Component({
  selector: 'app-slider',
  template: `<input type="range" [value]="value()" (input)="onInput($event)">`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SliderComponent {
  // Required signal input
  value = input.required<number>();
  // Optional with default
  step = input(1);
  // Two-way bindable model input
  modelValue = model(0);
  // Output
  changed = output<number>();

  onInput(e: Event) {
    const v = +(e.target as HTMLInputElement).value;
    this.modelValue.set(v);
    this.changed.emit(v);
  }
}

ASignal inputs use @Input() internally — they are identical at runtime

BSignal inputs are only available in components using ChangeDetectionStrategy.Default

CSignal inputs replace @Output() and use emit() to send values to the parent

DSignal inputs are typed as InputSignal<T>, are read with value(), integrate with the signal graph, and enable zoneless change detection

What is the primary purpose of Angular's @defer block (Angular 17+)?

javascript

@defer (on viewport; prefetch on idle) {
  <app-heavy-chart [data]="chartData" />
} @placeholder {
  <div class="skeleton" style="height: 300px"></div>
} @loading (minimum 300ms) {
  <app-spinner />
} @error {
  <p>Failed to load chart.</p>
}

ADeferring template compilation to improve build times

BBatching multiple HTTP requests before rendering

CSuspending change detection for a subtree until user interaction

DLazily loading a component, pipe, or directive and its dependencies only when certain conditions are met at runtime

What must component authors ensure to be compatible with Angular's non-destructive hydration?

javascript

@Component({
  selector: 'app-card',
  template: `<div class="card">{{ title }}</div>`,
  standalone: true,
})
export class CardComponent {
  @Input() title = '';

  // ❌ DON'T — mutates DOM in constructor
  constructor(private el: ElementRef) {
    el.nativeElement.style.color = 'red';  // runs server-side too, but may mismatch
  }

  // ❌ DON'T — dynamic IDs that differ between server and client
  id = Math.random().toString();

  // ✅ DO — use stable, deterministic values
  // ✅ DO — avoid nativeElement manipulation during initial render
}

ATemplates rendered server-side must produce the same DOM structure as what the client-side Angular bootstrap expects, avoiding DOM manipulation in constructors or ngOnInit

BAll components must implement OnInit and fetch data there

CComponents must use ViewEncapsulation.ShadowDom for hydration to work

DAll inputs must be signal-based for hydration compatibility

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