Angular Directive Lifecycle Hooks

Angular has eight lifecycle hooks, which can be divided into two categories: component lifecycle hooks and directive lifecycle hooks. The component lifecycle hooks are called when a component is created, rendered, and destroyed. The directive lifecycle hooks are called when a directive is applied to an element, updated, or destroyed.

Directive Lifecycle Hooks

ngOnInit

This hook is called once when the directive is initialized. It is used to perform any initialization logic, such as retrieving data from a service or setting default values for properties.

Example:

import { OnInit, Directive, Input } from "@angular/core";

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {

  @Input('appHighlight') highlightColor: string | undefined;

  ngOnInit() {
    if (!this.highlightColor) {
      this.highlightColor = 'yellow';
    }
  }
}

ngOnChanges

This hook is called when the input properties of a directive change. It receives an object that contains the previous and current values of the input properties.

Example:

import { Directive, Input, OnChanges, SimpleChanges } from "@angular/core";

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnChanges {

  @Input('appHighlight') highlightColor: string | undefined;

  ngOnChanges(changes: SimpleChanges) {
    console.log('Previous value:', changes.highlightColor.previousValue);
    console.log('Current value:', changes.highlightColor.currentValue);
  }
}

ngDoCheck

This hook is called whenever the change detection mechanism of Angular detects a change in the directive or its children. It is used to perform custom change detection logic.

Example:

import { Directive, DoCheck, Input } from "@angular/core";

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements DoCheck {

  @Input('appHighlight') highlightColor: string | undefined;

  ngDoCheck() {
    console.log('Checking for changes');
  }
}

ngOnDestroy

This hook is called just before the directive is destroyed. It is used to perform any cleanup logic, such as unsubscribing from observables or removing event listeners.

Example:

import { Directive, Input, OnDestroy } from "@angular/core";

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnDestroy {

  @Input('appHighlight') highlightColor: string | undefined;

  ngOnDestroy() {
    console.log('Directive is being destroyed');
  }
}

These hooks provide developers with the ability to perform specific actions at certain points in the lifecycle of a directive.

By using these hooks effectively, you can ensure that your directives behave correctly and efficiently in your Angular application.

Here is a brief overview of the remaining Angular lifecycle hooks:

1. ngAfterContentInit: This hook is called once after the component or directive content has been initialized. It is used to perform initialization logic that relies on the content of the component or directive.

2. ngAfterContentChecked: This hook is called after every change detection cycle, after the content of the component or directive has been checked. It is used to perform logic that relies on the content of the component or directive.

3. ngAfterViewInit: This hook is called once after the component or directive view has been initialized. It is used to perform initialization logic that relies on the view of the component or directive.

4. ngAfterViewChecked: This hook is called after every change detection cycle, after the view of the component or directive has been checked. It is used to perform logic that relies on the view of the component or directive.

These hooks are important for performing initialization logic that depends on the content or view of a component or directive, or for performing other types of logic that need to be executed at specific points in the lifecycle of a component or directive.

It's important to note that these hooks should be used carefully, as they can have performance implications if used improperly. It's always a good idea to test your code and measure its performance to ensure that your application is running efficiently.