Scribd
Upload
30 views4 pages

Angular Life Cycle Hooks

The document outlines Angular lifecycle hooks, which allow developers to interact with different phases of a component's life, from creation to destruction. It details the purpose and use cases for each hook, including ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and ngOnDestroy. Additionally, it provides the execution order of these hooks and suggests practical applications for real-world scenarios.

Uploaded by

shubhs1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views4 pages

Angular Life Cycle Hooks

The document outlines Angular lifecycle hooks, which allow developers to interact with different phases of a component's life, from creation to destruction. It details the purpose and use cases for each hook, including ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and ngOnDestroy. Additionally, it provides the execution order of these hooks and suggests practical applications for real-world scenarios.

Uploaded by

shubhs1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

‭ bsolutely!

Angular provides a set of‬‭lifecycle hooks‬‭that let you tap into different phases of a‬
A
‭component or directive’s life — from creation to destruction. Understanding these hooks is‬
‭essential‬‭for building scalable, performant, and bug-free‬‭Angular apps — especially at 6+ years‬
‭of experience level.‬

🔄
‭ Angular Lifecycle Hooks (With Use Cases & Execution‬
‭Order)‬

‭🔹 1.‬‭
ngOnChanges(changes: SimpleChanges)‬

‭●‬ P ngOnInit()‬‭and whenever‬‭


‭ urpose‬‭: Called‬‭before‬‭ @Input()‬‭bound properties‬
‭change.‬

@Input()‬‭data.‬
‭●‬ ‭Use Case‬‭: Detect changes to‬‭

‭ngOnChanges(changes: SimpleChanges) {‬
‭console.log('Input property changed:', changes);‬
‭}‬

‭🔹 2.‬‭
ngOnInit()‬

ngOnChanges()‬
‭●‬ ‭Purpose‬‭: Called once after the first‬‭ ‭.‬

‭●‬ ‭Use Case‬‭: Initialize data, fetch API, set up form‬‭controls.‬

‭ngOnInit() {‬
‭this.loadUserProfile();‬
‭}‬

‭🔹 3.‬‭
ngDoCheck()‬

@Input()‬‭hasn’t changed.‬
‭●‬ ‭Purpose‬‭: Called‬‭on every change detection run‬‭, even‬‭if‬‭
‭●‬ U
‭ se Case‬‭: Custom change detection (not recommended for frequent use unless‬
‭needed).‬

‭ngDoCheck() {‬
‭console.log('Change detection triggered!');‬
‭}‬

‭🔹 4.‬‭
ngAfterContentInit()‬

<ng-content>‬‭has been initialized.‬


‭●‬ ‭Purpose‬‭: Called‬‭once‬‭after content projected with‬‭

‭●‬ ‭Use Case‬‭: Interact with projected content from parent‬‭component.‬

‭ngAfterContentInit() {‬
‭console.log('Content initialized');‬
‭}‬

‭🔹 5.‬‭
ngAfterContentChecked()‬

‭●‬ ‭Purpose‬‭: Called‬‭after every check‬‭of projected content.‬

‭●‬ ‭Use Case‬‭: Monitor projected content changes.‬

‭ngAfterContentChecked() {‬
‭console.log('Content checked');‬
‭}‬

‭🔹 6.‬‭
ngAfterViewInit()‬

‭●‬ ‭Purpose‬‭: Called once the component’s view (and child‬‭views) are initialized.‬

@ViewChild()‬‭or‬‭trigger animations.‬
‭●‬ ‭Use Case‬‭: Interact with DOM using‬‭

‭@ViewChild('inputRef') inputRef!: ElementRef;‬


‭ngAfterViewInit() {‬
‭this.inputRef.nativeElement.focus();‬
‭}‬

‭🔹 7.‬‭
ngAfterViewChecked()‬

‭●‬ ‭Purpose‬‭: Called after every check of the component’s‬‭view and its children.‬

‭●‬ ‭Use Case‬‭: React to changes in the view.‬

‭ngAfterViewChecked() {‬
‭console.log('View checked');‬
‭}‬

‭🔹 8.‬‭
ngOnDestroy()‬

‭●‬ ‭Purpose‬‭: Called right before Angular destroys the‬‭component.‬

‭●‬ ‭Use Case‬‭: Cleanup — unsubscribe observables, detach‬‭events, clear intervals.‬

‭ngOnDestroy() {‬
‭this.subscription.unsubscribe();‬
‭}‬

‭🧠 Lifecycle Hook Order (Execution Flow)‬


‭ onstructor →‬
C
‭ngOnChanges() →‬
‭ngOnInit() →‬
‭ngDoCheck() →‬
‭ngAfterContentInit() →‬
‭ngAfterContentChecked() →‬
‭ngAfterViewInit() →‬
‭ngAfterViewChecked()‬
‭→ (repeats DoCheck → ContentChecked → ViewChecked on each change)‬
‭→ ngOnDestroy()‬

‭✅ Real-World Usage Mapping‬


‭Hook‬ ‭When to Use‬

ngOnChanges()‬
‭ @Input()‬‭changes‬
‭Detect‬‭

ngOnInit()‬
‭ ‭Fetch API data, init form, subscriptions‬

ngDoCheck()‬
‭ ‭Custom dirty-checking logic‬

ngAfterContentIn‬ ‭Work with‬‭


‭ <ng-content>‬‭projections‬
it()‬
‭

ngAfterViewInit(‬ A
‭ ViewChild‬
‭ ccess DOM with‬‭ ‭,‬
)‬
‭ ‭animations‬

ngOnDestroy()‬
‭ ‭ leanup subscriptions, intervals,‬
C
‭services‬

‭Would you like:‬

‭●‬ ‭A diagram of the lifecycle?‬

‭●‬ ‭A StackBlitz live example?‬

‭●‬ ‭Questions based on lifecycle behavior?‬

‭Let me know and I’ll send it right away!‬

You might also like