Angular Lifecycle Hooks
Download as PPTX, PDF0 likes1,719 views
The document outlines the lifecycle hooks in Angular, detailing their order of execution and specific purposes. It explains each hook's timing, limitations, and how they respond to changes in the component's state. Additionally, it emphasizes the importance of understanding the purpose and timing of these hooks for effective component management.
Angular Lifecycle Hooks
- 2. Overview In Order of Execution, 1. ngOnChanges 2. ngOnInit 3. ngDoCheck 4. ngAfterContentInit 5. ngAfterContentChecked 6. ngViewInit 7. ngViewChecked 8. ngOnDestroy 2
- 3. Pre-Requisites 1. What is Lifecycle Hooks? 2. Why is it necessary to know about it? 3
- 5. ngOnChanges ● Purpose: ○ Respond when Angular (re)sets data-bound input properties. ○ Tracks current and Previous values. ○ Only tracks @Input property values. ● Timing: ○ Called before ngOnInit() and everytime the input changes! ● Limitations: ○ Fails to detect changes user Object types. 5
- 6. ngOnInit 6
- 7. ngOnInit ● Purpose: ○ Respond when Angular first displays the data-bound properties. ○ To Perform initialization shortly after constructor. ○ To set up the component after Angular sets the input properties. ○ One-and-Done Hook! ● Timing: ○ Called only once after the first ngOnChanges(). ● Limitations: ○ A directive’s input properties are not set until constructor(). 7
- 8. ngDoCheck 8
- 9. ngDoCheck ● Purpose: ○ Detect when Angular doesn’t detect on its own. ○ Compares current state against previous values. ● Timing: ○ Called during every change detection run. ○ Called immediately after ngOnChanges() and ngOnInit().. ● Limitations: ○ Called with an enormous frequency. ○ Dependency must be very less or the user experience suffers. 9
- 11. ngAfterContentInit ● Purpose: ○ Respond when Angular projects external content into the component’s view. ○ To Perform additional initialization tasks shortly after content projection. ● Timing: ○ Called only once after Angular fully initialized all the contents. 11
- 13. ngAfterContentChecked ● Purpose: ○ Respond when change detector completes the content checking. ○ To Perform tasks after every content checking. ● Timing: ○ Called after every content check in the directive. ● Limitations: ○ Instantiated before the changes in child component. AfterContent => @ContentChild decorator 13
- 15. ngAfterViewInit ● Purpose: ○ Respond when Angular fully initialized a component’s view. ○ To Perform tasks after all set in the view. ● Timing: ○ Called immediately after view initialization. ● Limitations: ○ Invoked only once after the view is initialized. 15
- 17. ngAfterViewChecked ● Purpose: ○ Respond when change detector completes the component’s view checking. ○ To Perform tasks after every content checking. ● Limitations: ○ Called even when there is no changes so performance issues. AfteView => @ViewChild decorator 17
- 18. ngOnDestroy 18
- 19. ngOnDestroy ● Purpose: ○ Cleanup just before Angular destroys the component. ○ Time to notify the other components. ○ Unsubscribe observables, detach DOM events, stop Interval Timers, free up the memory leaks and resources. ○ Vital Hooks. ● Timing: ○ Called just before Angular destroys the component. 19
- 20. Post-Requisites 1. What are the advantages of using Lifecycle hooks? 2. And What are the limitations? Note ● Should Always remember the purpose and timing of every Hooks! 20
- 21. Thank you! 21