1. Introduction

Angular lifecycle hooks are special methods that allow you to tap into the lifecycle of Angular components and directives. They provide visibility into key events and states during the lifecycle of a component.

2. Lifecycle Hooks

Lifecycle hooks are defined by Angular, and they can be implemented in your components or directives to manage the various phases of the component lifecycle.

3. Common Lifecycle Hooks

• ngOnInit: Called once the component is initialized.
• ngOnChanges: Called when input properties change.
• ngDoCheck: Called during every change detection run.
• ngAfterViewInit: Called after the view and child views are initialized.
• ngOnDestroy: Called just before the component is destroyed.

4. Code Examples

4.1 ngOnInit Example

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

@Component({
    selector: 'app-example',
    template: `
{{ title }}
`,
})
export class ExampleComponent implements OnInit {
    title: string;

    ngOnInit() {
        this.title = 'Hello, Angular Lifecycle!';
    }
}
                

4.2 ngOnDestroy Example

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

@Component({
    selector: 'app-example',
    template: `
Component with Cleanup
`,
})
export class ExampleComponent implements OnDestroy {
    ngOnDestroy() {
        console.log('Component is about to be destroyed');
    }
}
                

5. Best Practices

1. Use ngOnInit for initialization logic.
2. Keep ngOnChanges minimal; avoid complex logic.
3. Use ngOnDestroy for cleanup tasks.
4. Utilize ngDoCheck for performance optimization judiciously.
5. Understand when to use lifecycle hooks to avoid unnecessary complexity.

6. FAQ