Interview questions
Lifecycle hooks — what the interviewer tests
Order, correct usage, and the constructor-vs-ngOnInit distinction.
What is really being tested: whether you know *why* each hook exists, not just their names. Order: ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit/Checked → ngAfterViewInit/Checked → ngOnDestroy.
The hooks are a play’s cues: rehearsal (constructor) sets the cast, curtain-up (ngOnInit) starts the scene, and the final bow (ngOnDestroy) clears the stage.
Key concepts
1
The constructor only wires dependencies (inputs are not set yet). ngOnInit is for initialisation that needs inputs. ngAfterViewInit is the first point @ViewChild references exist. ngOnDestroy must tear down subscriptions, timers and listeners.
`ngOnInit``ngAfterViewInit``ngOnDestroy`ngOnInitngAfterViewInit
2
Common wrong answer: "do data loading in the constructor." It works by luck but breaks with inputs and SSR. Follow-ups: "why might ngAfterViewInit throw ExpressionChangedAfterItHasBeenChecked?" (mutating bound state after view init) and "which hooks fire on every CD tick?" (ngDoCheck, AfterContentChecked, AfterViewChecked — keep them cheap).
Common wrong answer:Follow-ups:ngAfterViewInitngDoCheckAfterContentChecked
typescript
export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('canvas') canvas!: ElementRef;
private sub?: Subscription;
ngOnInit() { this.sub = this.data$.subscribe(d => (this.data = d)); } // inputs ready
ngAfterViewInit() { this.render(this.canvas.nativeElement); } // view ready
ngOnDestroy() { this.sub?.unsubscribe(); } // cleanup
}