Angular 8 Component Lifecycle Hooks

By Digamber Rawat Last updated on
Today we are going to look at Angular 8 Component Lifecycle Hooks with real-world examples. A component in Angular has a lifecycle, and Angular 8 offers us Hooks. Hooks allow us to trigger actions by getting into the lifecycle of the components.

What is Lifecycle Hook in Angular?

Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing it from the DOM.

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

Angular 8 Component Lifecycle Hooks Examples

ngOnChanges: This lifecycle hook is called when any data-bound property of an angular directive changes. This method returns the SimpleChanges object, which holds the current and previous data properties. Make sure you limit the processing amount because it keeps on triggering all the time.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     // code goes here...
   }
}
ngOnInit: This Angular 8 lifecycle hook is called at once at the time of component initialization.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements OnInit {

   ngOnInit() {
     // code goes here...
   }

}
ngDoCheck: This lifecycle hook is used instead of a ngOnChanges hook, especially when Angular fails to recognize the changes.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements DoCheck {

   ngDoCheck() {
     // code goes here...
   }

}
ngAfterContentInit: An Angular’s callback function, it is initialized right after the Angular finishes the initialization of all content in a directive. And it is called once only when the directive is called.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements AfterContentInit {

   ngAfterContentInit() {
     // code goes here...
   }

}
ngAfterContentChecked: This lifecycle method is called right after the directive content is checked.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements AfterContentChecked {

   ngAfterContentChecked() {
     // code goes here...
   }

}
ngAfterViewInit: This lifecycle method is triggered right after the component’s view is instantiated.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements AfterViewInit {

   ngAfterViewInit() {
     // code goes here...
   }

}
ngAfterViewChecked: This lifecycle method is called right after the component’s content is checked.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements AfterViewChecked {

   ngAfterViewChecked() {
     // code goes here...
   }

}
ngOnDestroy: A significant lifecycle hook, it protects memory leak in Angular. It triggers when the component is destroyed.

@Component({
   selector: 'ng-app', template: `...`
})

class AppComponent implements OnDestroy {

   ngOnDestroy() {
     // code goes here...
   }

}

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me