What are the lifecycle hooks for components and directives?

Lifecycle hooks are special methods provided by Angular that allow you to execute code at specific points during the lifecycle of a component or directive. They can be used to perform tasks such as initialization, data fetching, and cleanup. Here's a list of the primary lifecycle hooks available in Angular, in the order in which they are called:

1. ngOnChanges: This hook is called whenever one or more of the input properties of a component or directive change. It receives an object containing the changed properties and their previous and current values. This hook is useful for reacting to changes in input properties and updating internal state accordingly.

2. ngOnInit: This hook is called once after the component or directive is instantiated and its input properties are set. It is typically used for one-time initialization tasks, such as fetching data or setting up event listeners.

3. ngDoCheck: This hook is called whenever change detection runs, after ngOnChanges (if present) and ngOnInit. It allows you to implement custom change detection for a component or directive, although this is not commonly needed.

4. ngAfterContentInit: This hook is called once after Angular projects any external content into the component's view (i.e., after content transclusion). It can be used to perform tasks that depend on the projected content, such as querying for child components or manipulating the DOM.

5. ngAfterContentChecked: This hook is called after Angular checks the content projected into the component and after every subsequent change detection run. It is typically used in combination with ngAfterContentInit.

6. ngAfterViewInit: This hook is called once after Angular initializes the component's view and child views (or the view that the directive is in). It can be used to access and manipulate DOM elements or perform tasks that depend on child components being fully initialized.

7. ngAfterViewChecked: This hook is called after Angular checks the component's view and child views (or the view that the directive is in) and after every subsequent change detection run. It is typically used in combination with ngAfterViewInit.

8. ngOnDestroy: This hook is called just before Angular destroys the component or directive. It is used for cleanup tasks, such as unsubscribing from observables, removing event listeners, or clearing resources allocated during the lifecycle of the component or directive.

To use a lifecycle hook, you need to implement its corresponding method in your component or directive class. For example, to use the ngOnInit hook, you would implement the ngOnInit() method in your class:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    // Perform one-time initialization tasks here
  }
}

Note that it's a good practice to implement the corresponding lifecycle hook interfaces (e.g., OnInit for ngOnInit) to ensure that the method signatures are correct and that your code remains compatible with future updates to Angular.