Downloaded 46 times
Uploaded bySquash Apps Pvt Ltd
Angular Lifecycle Hooks
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.
More Related Content
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Angular Lifecycle Hooks
- 1.
- 2. Overview In Order ofExecution, 1. ngOnChanges 2. ngOnInit 3. ngDoCheck 4. ngAfterContentInit 5. ngAfterContentChecked 6. ngViewInit 7. ngViewChecked 8. ngOnDestroy 2
- 3. Pre-Requisites 1. What isLifecycle Hooks? 2. Why is it necessary to know about it? 3
- 4.
- 5. ngOnChanges ● Purpose: ○ Respondwhen 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.
- 7. ngOnInit ● Purpose: ○ Respondwhen 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.
- 9. ngDoCheck ● Purpose: ○ Detectwhen 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
- 10.
- 11. ngAfterContentInit ● Purpose: ○ Respondwhen 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
- 12.
- 13. ngAfterContentChecked ● Purpose: ○ Respondwhen 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
- 14.
- 15. ngAfterViewInit ● Purpose: ○ Respondwhen 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
- 16.
- 17. ngAfterViewChecked ● Purpose: ○ Respondwhen 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.
- 19. ngOnDestroy ● Purpose: ○ Cleanupjust 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 arethe advantages of using Lifecycle hooks? 2. And What are the limitations? Note ● Should Always remember the purpose and timing of every Hooks! 20
- 21.