Understanding Angular Life Cycle Hooks: A Comprehensive Guide
Tags: webdev, javascript, beginners, angular
Published: 2024-06-11 08:38:58

When working with Angular, it's essential to understand the lifecycle of a component. Angular provides several lifecycle hooks that allow you to tap into different phases of a component's existence, from creation to destruction. This blog will explore these lifecycle hooks, illustrating their use with code examples.

## What Are Angular Life Cycle Hooks?

Lifecycle hooks are methods Angular calls during the various phases of a component's lifecycle. These hooks provide opportunities to execute custom logic at critical points in a component's existence. The primary lifecycle hooks in Angular are:

1. **ngOnChanges**
2. **ngOnInit**
3. **ngDoCheck**
4. **ngAfterContentInit**
5. **ngAfterContentChecked**
6. **ngAfterViewInit**
7. **ngAfterViewChecked**
8. **ngOnDestroy**

Let's dive into each of these hooks with code examples.

## 1. ngOnChanges

`ngOnChanges` is called before `ngOnInit` and whenever one or more data-bound input properties change. It receives a `SimpleChanges` object that contains the current and previous property values.

```typescript
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-on-changes-example',
  template: `<p>{{ data }}</p>`
})
export class OnChangesExampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges - data changed:', changes);
  }
}
```

## 2. ngOnInit

`ngOnInit` is called once, after the first `ngOnChanges`. It's typically used for component initialization and fetching data.

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

@Component({
  selector: 'app-on-init-example',
  template: `<p>ngOnInit example works!</p>`
})
export class OnInitExampleComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit - component initialized');
  }
}
```

## 3. ngDoCheck

`ngDoCheck` is called during every change detection run, allowing you to implement your custom change detection.

```typescript
import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-do-check-example',
  template: `<p>ngDoCheck example works!</p>`
})
export class DoCheckExampleComponent implements DoCheck {
  ngDoCheck() {
    console.log('ngDoCheck - custom change detection');
  }
}
```

## 4. ngAfterContentInit

`ngAfterContentInit` is called once after Angular projects external content into the component's view.

```typescript
import { Component, AfterContentInit, ContentChild } from '@angular/core';

@Component({
  selector: 'app-after-content-init-example',
  template: `<ng-content></ng-content>`
})
export class AfterContentInitExampleComponent implements AfterContentInit {
  @ContentChild('projectedContent') content;

  ngAfterContentInit() {
    console.log('ngAfterContentInit - content initialized', this.content);
  }
}
```

## 5. ngAfterContentChecked

`ngAfterContentChecked` is called after every check of projected content.

```typescript
import { Component, AfterContentChecked, ContentChild } from '@angular/core';

@Component({
  selector: 'app-after-content-checked-example',
  template: `<ng-content></ng-content>`
})
export class AfterContentCheckedExampleComponent implements AfterContentChecked {
  @ContentChild('projectedContent') content;

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked - content checked', this.content);
  }
}
```

## 6. ngAfterViewInit

`ngAfterViewInit` is called once after the component's view and its child views have been initialized.

```typescript
import { Component, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-after-view-init-example',
  template: `<p #viewChildElement>View Child</p>`
})
export class AfterViewInitExampleComponent implements AfterViewInit {
  @ViewChild('viewChildElement') viewChild;

  ngAfterViewInit() {
    console.log('ngAfterViewInit - view initialized', this.viewChild);
  }
}
```

## 7. ngAfterViewChecked

`ngAfterViewChecked` is called after every check of the component's view and its child views.

```typescript
import { Component, AfterViewChecked, ViewChild } from '@angular/core';

@Component({
  selector: 'app-after-view-checked-example',
  template: `<p #viewChildElement>View Child</p>`
})
export class AfterViewCheckedExampleComponent implements AfterViewChecked {
  @ViewChild('viewChildElement') viewChild;

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked - view checked', this.viewChild);
  }
}
```

## 8. ngOnDestroy

`ngOnDestroy` is called just before Angular destroys the component. This hook is typically used for cleanup, such as unsubscribing from observables and detaching event handlers.

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

@Component({
  selector: 'app-on-destroy-example',
  template: `<p>ngOnDestroy example works!</p>`
})
export class OnDestroyExampleComponent implements OnDestroy {
  ngOnDestroy() {
    console.log('ngOnDestroy - component destroyed');
  }
}
```

## Conclusion

Understanding Angular's lifecycle hooks is crucial for building robust, efficient, and maintainable applications. These hooks provide precise control over component initialization, changes, and destruction, enabling you to implement custom logic at each stage of a component's lifecycle. By mastering these hooks, you can ensure that your Angular applications behave as expected and perform optimally.

Happy coding!

## Exploring the Code

Visit the [GitHub repository](https://github.com/manthanank/angular-examples/tree/life-cycle-hooks) to explore the code in detail.

---