What are the different lifecycle hooks available to Components in Angular?

The below are the lifecycle hooks available in Angular. These are added by implementing the respective interface on the component.

  1. ngOnChange - before OnInit and whenever Input property changes in value
  2. ngOnInit - called once the Input properties are set, used to fetch initial data
  3. ngDoCheck - detect and act upon any changes that are by default on detected
  4. ngAfterContentInit - after loading any external entity into the component, such as a directive
  5. ngAfterContentChecked - after the content loaded is checked
  6. ngAfterViewInit - after the view is initialized
  7. ngAfterViewChecked - after the view is checked
  8. ngOnDestroy - just before the component is destroyed

The below are the lifecycle hooks available in Angular. These are added by implementing the respective interface on the component.

  1. ngOnChange – before OnInit and whenever Input property changes in value
  2. ngOnInit – called once the Input properties are set, used to fetch initial data
  3. ngDoCheck – detect and act upon any changes that are by default on detected
  4. ngAfterContentInit – after loading any external entity into the component, such as a directive
  5. ngAfterContentChecked – after the content loaded is checked
  6. ngAfterViewInit – after the view is initialized
  7. ngAfterViewChecked – after the view is checked
  8. ngOnDestroy – just before the component is destroyed

Buy Me A Coffee

Found this article helpful? Please consider supporting!

Ram
Ram

I'm a full-stack developer and a software enthusiast who likes to play around with cloud and tech stack out of curiosity. You can connect with me on Medium, Twitter or LinkedIn.

Leave a Reply

Your email address will not be published. Required fields are marked *