Simple Flow Sequence :
- consttructor() -->ngOnChanges()-->ngOnInit()--->ngDoCheck()
- after content Initialized and checked - ngAfterContentInit() & ngAfterContentChecked()
- after View Initialized and checked - ngAfterViewInit() and ngAfterviewChecked()
- finally destroy - destroy ngOnDestroy()
When Component Loaded into DOM
- ngOnInit() : This is called when the component is loaded into the DOM and it occurs only once.
Change in Input Property called before ngOnInit()
- ngOnChanges(): This is called when there is Input property to the component and it is called before ngOnInit() and occurs every time there is a change in the input property. It is not called if there is no input property to the component
Every Changes Detected and after ngOnChanges() and ngOnInit()
- ngDoCheck(): occurs every time there is a change detection and immediately after ngOnChanges() and ngOnInit().
After View Initialized and After View Checked
- ngAfterViewInit(): This is called once after the component’s view/ child views are loaded and right after ngAfterContentChecked() and occurs only once.
- ngAfterViewChecked(): This is called after component’s view/ child views are loaded and called after ngAfterViewInit() and every time after ngDoCheck().
After Content Initilized and After Content Checked
- ngAfterContentInit(): This is called once external content is projected into component’s view and right after the first ngDoCheck() and occurs only once.
- ngAfterContentChecked(): This is called after external content projected into component’s view and called after ngAfterContentInit() and every subsequent ngDoCheck().
Before Component Destroy
- ngOnDestroy(): This is called right before the component gets destroyed and occurs only once.
