ngOnDestroy Example | Angular

ngOnChanges Example

ngOnInit Example

ngDoCheck Example

ngAfterContentInit Example

ngAfterContentChecked Example

ngAfterViewInit Example

ngAfterViewChecked Example

ngOnDestroy Example

Key Takeaways

• ngOnDestroy is called just before a component is destroyed.
• Use ngOnDestroy to perform tasks like unsubscribing from observables.
• Conditional directives like *ngIf can trigger component destruction.
• In larger applications, memory management with ngOnDestroy is crucial.

Understanding how Angular's lifecycle hooks work is key to managing your application's lifecycle effectively. One of the most important hooks is ngOnDestroy.

Understanding ngOnDestroy

ngOnDestroy is crucial for resource management in Angular. It's your go-to method for cleaning up when a component is removed from the DOM. This cleanup involves tasks like unsubscribing from services or detaching event listeners to prevent memory leaks. If you're integrating with APIs or complex observable streams, ngOnDestroy is where you finalize those operations.

Example Setup

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `<button (click)="update()">Toggle Child</button>
              <br/><app-child *ngIf='showChild'></app-child>`
})
export class ParentComponent implements OnInit {
  public showChild = true;
  constructor() { }
  update() {
    this.showChild = !this.showChild;
  }
  ngOnInit() {
    console.log('parent init');
  }
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
This is the child component.
`
})
export class ChildComponent implements OnInit, OnDestroy {
  constructor() { }
  ngOnInit() {
    console.log('child init');
  }
  ngOnDestroy() {
    console.log('destroying child...');
    // Additional cleanup code here
  }
}

In this example, the ParentComponent toggles the visibility of ChildComponent using a button. Each toggle destroys and recreates ChildComponent, triggering ngOnDestroy when it's removed.

When Should You Use ngOnDestroy?

Whenever your component subscribes to observables or manages other finite resources, it's best practice to use ngOnDestroy. Not removing listeners or failing to cancel subscriptions can lead to memory leaks, which degrade performance over time. Larger applications and applications with significant data interactions particularly benefit from vigilant cleanup routines using ngOnDestroy.

Common Pitfalls

A common mistake is forgetting to implement cleanup in large applications. It's crucial to be diligent across all components, especially those dealing with data subscriptions and DOM events. Ensure ngOnDestroy covers:

• Unsubscribing from all observables.
• Removing event listeners added directly.
• Clearing timers and intervals.

FAQ

Why is ngOnDestroy important in Angular?

It helps in managing application resources by performing cleanup operations, preventing memory leaks, and ensuring efficient application performance.

Can ngOnDestroy be used for services?

No, ngOnDestroy is specific to components and directives. Services typically persist for the application's lifecycle, but you can unsubscribe from observable streams within them manually.

What happens if I don't use ngOnDestroy?

You may encounter memory leaks, as unmanaged resources are not released. This can lead to increased memory usage and degraded application performance.

How do I ensure I correctly implement ngOnDestroy?

Regularly audit your components for subscriptions and custom events. Use testing to verify that resources are released when components are destroyed.