ngOnDestroy for cleanup in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to implement the Angular lifecycle hook for cleanup.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>Sample component</p>`
})
export class SampleComponent implements [1] {
  ngOnDestroy() {
    console.log('Cleanup done');
  }
}

Drag options to blanks, or click blank then click option'

ADoCheck

BAfterViewInit

COnInit

DOnDestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnInit instead of OnDestroy

Forgetting to implement the interface

Misspelling ngOnDestroy

The OnDestroy interface is used to implement the ngOnDestroy lifecycle hook for cleanup in Angular components.

2fill in blank

medium

Complete the code to unsubscribe from a subscription in ngOnDestroy.

Angular

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

@Component({
  selector: 'app-timer',
  template: `<p>Timer running</p>`
})
export class TimerComponent implements OnDestroy {
  private timerSub: Subscription;

  constructor() {
    this.timerSub = new Subscription();
  }

  ngOnDestroy() {
    this.timerSub.[1]();
  }
}

Drag options to blanks, or click blank then click option'

Aunsubscribe

Bclose

Cstop

Ddestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a non-existent method like stop or destroy

Forgetting to unsubscribe

Calling unsubscribe outside ngOnDestroy

To clean up subscriptions in Angular, call unsubscribe() inside ngOnDestroy().

3fill in blank

hard

Fix the error in the ngOnDestroy method to properly clean up a timer.

Angular

export class ClockComponent implements OnDestroy {
  private intervalId: any;

  start() {
    this.intervalId = setInterval(() => {
      console.log('Tick');
    }, 1000);
  }

  ngOnDestroy() {
    clearInterval([1]);
  }
}

Drag options to blanks, or click blank then click option'

Athis.setInterval

Bthis.intervalId

CsetInterval

DintervalId

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without this

Passing the function instead of the ID

Using a wrong property name

Use this.intervalId to clear the interval set in the component.

4fill in blank

hard

Fill both blanks to correctly implement ngOnDestroy and clean up a subscription.

Angular

import { Component, [1] } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-data',
  template: `<p>Data loaded</p>`
})
export class DataComponent implements [1] {
  private dataSub: Subscription = new Subscription();

  ngOnDestroy() {
    this.dataSub.[2]();
  }
}

Drag options to blanks, or click blank then click option'

AOnDestroy

BOnInit

Cunsubscribe

Ddestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Implementing wrong lifecycle interface

Calling a non-existent method like destroy

Not unsubscribing in ngOnDestroy

The component must implement OnDestroy and call unsubscribe() on the subscription in ngOnDestroy().

5fill in blank

hard

Fill all three blanks to correctly clean up multiple subscriptions in ngOnDestroy.

Angular

import { Component, [1] } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-multi',
  template: `<p>Multiple subscriptions</p>`
})
export class MultiSubComponent implements [1] {
  private sub1: Subscription = new Subscription();
  private sub2: Subscription = new Subscription();

  ngOnDestroy() {
    this.sub1.[2]();
    this.sub2.[3]();
  }
}

Drag options to blanks, or click blank then click option'

AOnDestroy

Bunsubscribe

Cdestroy

DOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using destroy instead of unsubscribe

Not implementing OnDestroy

Unsubscribing only one subscription

Implement OnDestroy and call unsubscribe() on both subscriptions to clean up properly.