ngOnDestroy for cleanup in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when ngOnDestroy is called in an Angular component?

Consider an Angular component that subscribes to a data stream. What is the main purpose of implementing the ngOnDestroy lifecycle hook in this component?

A To update the component's view after data changes

B To initialize the component's data when it is created

C To unsubscribe from the data stream and release resources before the component is destroyed

D To handle user input events during the component's lifetime

💡 Hint

Think about what happens when a component is removed from the screen and how to avoid memory leaks.

The ngOnDestroy hook is called just before Angular destroys the component. It is used to clean up resources like subscriptions to avoid memory leaks.

📝 Syntax

intermediate

Which code snippet correctly implements ngOnDestroy to clean up a subscription?

You have a subscription stored in this.sub. Which option correctly unsubscribes in ngOnDestroy?

Angular

export class MyComponent implements OnDestroy {
  sub = this.dataService.getData().subscribe();

  ngOnDestroy() {
    // What goes here?
  }
}

A this.sub.unsubscribe();

B this.sub.close();

C this.sub.stop();

D this.sub.cancel();

💡 Hint

Subscriptions have a method to stop receiving data.

The unsubscribe() method stops the subscription and frees resources. Other methods like close(), stop(), or cancel() do not exist on subscriptions.

🔧 Debug

advanced

Why does this Angular component cause a memory leak?

Look at this component code. Why might it cause a memory leak when the component is destroyed?

Angular

export class LeakComponent implements OnDestroy {
  sub = this.dataService.getData().subscribe(data => {
    console.log(data);
  });

  ngOnDestroy() {
    // No cleanup here
  }
}

A Because the subscription is never unsubscribed in ngOnDestroy

B Because ngOnDestroy is not implemented correctly with a return type

C Because the subscription callback logs data to the console

D Because the component does not implement OnInit

💡 Hint

Think about what happens to active subscriptions when a component is removed.

Not unsubscribing from subscriptions causes them to stay active, holding memory and causing leaks. Logging data or missing OnInit does not cause leaks.

🧠 Conceptual

advanced

What is the best practice for cleaning up multiple subscriptions in ngOnDestroy?

If a component has multiple subscriptions, what is the recommended way to clean them up in ngOnDestroy?

A Call unsubscribe() on each subscription individually in ngOnDestroy

B Ignore unsubscribing because Angular cleans up automatically

C Set each subscription variable to null in ngOnDestroy

D Store all subscriptions in a Subscription object and call unsubscribe() once on it

💡 Hint

Think about grouping subscriptions for easier cleanup.

Using a Subscription container (like new Subscription()) to add all subscriptions and then calling unsubscribe once is cleaner and less error-prone.

❓ state_output

expert

What is the console output after the component is destroyed?

Given this Angular component, what will be logged to the console after the component is destroyed?

Angular

export class TimerComponent implements OnDestroy {
  count = 0;
  intervalId = setInterval(() => {
    this.count++;
    console.log('Count:', this.count);
  }, 1000);

  ngOnDestroy() {
    clearInterval(this.intervalId);
    console.log('Cleanup done');
  }
}

// Assume component is destroyed after 3500ms

A "Cleanup done", "Count: 1", "Count: 2", "Count: 3"

B "Count: 1", "Count: 2", "Count: 3", "Cleanup done"

C "Count: 1", "Count: 2", "Cleanup done"

D "Count: 1", "Count: 2", "Count: 3"

💡 Hint

Consider how many intervals run before clearInterval is called at 3500ms.

The interval runs every 1000ms. After 3500ms, three counts have logged (at 1000, 2000, 3000 ms). Then ngOnDestroy clears the interval and logs "Cleanup done".