Lifecycle hooks are methods Angular calls at specific moments in a component's life — creation, input changes, rendering, and destruction. You implement them by adding interface methods to your component class.
{ , , , , } ;
({ ... })
, , {
() {
}
() {
}
() {
}
}
constructor → DI happens; inputs NOT yet available
ngOnChanges → when @Input values are set/changed
ngOnInit → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck → every change detection run (custom change detection)
ngAfterContentInit → projected content (<ng-content>) initialized
ngAfterViewInit → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked → after each view check
ngOnDestroy → before removal ★ (unsubscribe, clear timers)
ngOnInit() {
this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
this.subscription.unsubscribe(); // prevent memory leaks!
clearInterval(this.timer);
}
ngOnInit — the standard place for initialization and data fetching (unlike the constructor, @Inputs are available here).ngAfterViewInit — when child views and @ViewChild references exist.ngOnDestroy — cleanup: unsubscribe from Observables, clear timers, remove listeners.The constructor should only do DI; inputs aren't bound yet there. ngOnInit runs after Angular has set up the component and its inputs — the correct place for startup logic.
Lifecycle hooks let you run logic at the right time — initialize in ngOnInit, access the rendered view in ngAfterViewInit, and crucially clean up in ngOnDestroy (unsubscribing from Observables is the #1 way to avoid memory leaks in Angular).
Knowing the order and the role of each hook is essential for correct data fetching, DOM access, and resource management.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate