What is Angular LifeCycle Hooks

Every Component has its lifecycle which is managed by angular

1.Angular first create lifecycle.
2.Then renders it.
3.Also create and render its children component.
4.Then it checks about the changes in the properties.
5.After that removes it after destroying it from the DOM.

Angular life moments and the lifecycle hooks provide visibilit that provide the ability to act when they occur.
Single directive always have same set of lifecycle hooks.

Angular life moments and lifecycle hooks provide visibility that provide the ability to act when they occur.
Single directive always have same set of lifecycle hooks.

Angular Components lifecycle hooks overview and functionality.

All the Directives of angular and component have lifecycle hooks as angular clearly updates,creates and destroy them.

Every interface related to directives and component have single hook which is prefixed with "ng"
Ex: ngOnInit() is a lifecycle hook which is called after creating componnt.

export class PeekABoo implements OnInit {
  constructor(private logger: LoggerService) { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { this.logIt(`OnInit`); }

  logIt(msg: string) {
    this.logger.log(`#${nextId++} ${msg}`);
  }
}

Angular calls the lifecycle hooks  in the following sequence at specific moments:

There are number of lifecycle  hooks in angular

1.ngOnChanges : Responds when Angular (re)sets data-bound input properties.
This hook is always called befor ngOnInit and whenever there is a change in data-bound properties.

2.ngOnInit : This initializes the directive/component after Angular first displays the data-bound properties and is called after craetion of component.
Always Called once, after the first ngOnChanges().

3.ngDoCheck : This is Used to detect the changes that are made by angular self wont able to  detect and understand.
It is called after every chnage detection occured and called next to ngOnChanges and ngonInit

4.ngAfterContentInit : this is called once after the first ngDoCheck().

5.ngOnDestroy: Clean Ups before the component/directive is destroyed.

References:

https://angular.io/guide/lifecycle-hooks

https://codecraft.tv/courses/angular/components/lifecycle-hooks/