Angular Lifecycle Hooks

The angular application goes through a whole arrangement of cycles or has a lifecycle right from its introduction to the furthest limit of the application. The portrayal of lifecycle in pictorial portrayal is as follows,

The description of each lifecycle method is as below,

ngOnChanges

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content, children are checked.

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
} 

The following snippet shows how a component can implement this interface to define an on-changes handler for an input property.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  @Input() prop: number = 0;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

ngOnInit 

This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.

interface OnInit {
  ngOnInit(): void
}   

The following snippet shows how a component can implement this interface to define its own initialization method.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnInit {
  ngOnInit() {
    // ...
  }
}

ngDoCheck

This is for the detection and to act on changes that Angular can't or won't detect on its own.

interface DoCheck {
  ngDoCheck(): void
} 

The following snippet shows how a component can implement this interface to invoke it own change-detection cycle.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements DoCheck {
  ngDoCheck() {
    // ...
  }
}

ngAfterContentInit

This is called in response after Angular projects external content into the component's view.

      
interface AfterContentInit {
  ngAfterContentInit(): void
}
    

The following snippet shows how a component can implement this interface to define its own content initialization method.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterContentInit {
  ngAfterContentInit() {
    // ...
  }
}

ngAfterContentChecked

This is called in response after Angular checks the content projected into the component.

interface AfterContentChecked {
  ngAfterContentChecked(): void
}  

The following snippet shows how a component can implement this interface to define its own after-check functionality.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterContentChecked {
  ngAfterContentChecked() {
    // ...
  }
}

ngAfterViewInit

This is called in response after Angular initializes the component's views and child views.

interface AfterViewInit {
  ngAfterViewInit(): void
}  

The following snippet shows how a component can implement this interface to define its own view initialization method.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // ...
  }
}

ngAfterViewChecked

This is called in response after Angular checks the component's views and child views.

interface AfterViewChecked {
  ngAfterViewChecked(): void
}

The following snippet shows how a component can implement this interface to define its own after-check functionality.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    // ...
  }
}

ngOnDestroy

This is the cleanup phase just before Angular destroys the directive/component.

interface OnDestroy {
  ngOnDestroy(): void
}   

The following snippet shows how a component can implement this interface to define its own custom clean-up method.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnDestroy {
  ngOnDestroy() {
    // ...
  }
}