Observable in component lifecycle in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an Observable is subscribed in ngOnInit but not unsubscribed?

Consider an Angular component that subscribes to an Observable inside ngOnInit but does not unsubscribe in ngOnDestroy. What is the likely outcome?

Angular

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

@Component({
  selector: 'app-timer',
  template: `<p>Timer running</p>`
})
export class TimerComponent implements OnInit {
  ngOnInit() {
    interval(1000).subscribe(val => console.log(val));
  }
}

A The Observable throws an error when the component is destroyed.

B The Observable automatically stops emitting when the component is destroyed.

C The Observable will keep emitting even after the component is destroyed, causing a memory leak.

D The Observable completes immediately after the component is initialized.

💡 Hint

Think about what happens to subscriptions if you don't clean them up.

Subscriptions to Observables do not automatically stop when a component is destroyed. Without unsubscribing, the Observable continues emitting, which can cause memory leaks.

❓ state_output

intermediate

What is the console output when using takeUntil in ngOnDestroy?

Given the following Angular component code, what will be printed to the console when the component is destroyed after 3 seconds?

Angular

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `<p>Example</p>`
})
export class ExampleComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    interval(1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => console.log(val));

    setTimeout(() => this.ngOnDestroy(), 3000);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    console.log('Destroyed');
  }
}

A

Destroyed
0
1
2

B

0
1
2
Destroyed

C

0
1
2
3
Destroyed

D

0
1
Destroyed

💡 Hint

Consider how takeUntil stops the subscription when destroy$ emits.

The interval emits values every second starting at 0. After 3 seconds, ngOnDestroy is called, triggering destroy$ which stops the subscription. So values 0, 1, 2 are logged, then 'Destroyed'.

🔧 Debug

advanced

Why does this Angular component fail to unsubscribe properly?

Examine the following Angular component code. Why does the subscription not stop when the component is destroyed?

Angular

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-buggy',
  template: `<p>Buggy</p>`
})
export class BuggyComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    interval(1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy() {
    this.destroy$ = new Subject<void>();
    this.destroy$.next();
    this.destroy$.complete();
  }
}

A The destroy$ Subject is reassigned in ngOnDestroy, so the original subscription never receives the next notification.

B The subscription is missing the unsubscribe call, so it never stops.

C The interval Observable does not emit any values, so the subscription never starts.

D The component is missing the OnDestroy interface implementation.

💡 Hint

Look carefully at how destroy$ is used in ngOnDestroy.

Reassigning destroy$ to a new Subject in ngOnDestroy means the original Subject used in takeUntil is not triggered. The subscription keeps running.

🧠 Conceptual

advanced

Which RxJS operator is best to automatically unsubscribe on component destroy?

In Angular, to avoid manual unsubscription, which RxJS operator is designed to complete an Observable when a notifier emits, commonly used with a Subject triggered in ngOnDestroy?

A takeUntil

B switchMap

C mergeMap

D filter

💡 Hint

This operator listens to a notifier Observable and completes the source Observable when the notifier emits.

takeUntil listens to a notifier Observable (often a Subject) and completes the source Observable when the notifier emits, making it ideal for automatic unsubscription.

📝 Syntax

expert

Identify the syntax error preventing proper Observable unsubscription

Which option contains a syntax error that will prevent the Angular component from compiling and unsubscribing correctly?

Angular

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-syntax',
  template: `<p>Syntax Test</p>`
})
export class SyntaxComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    interval(1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

A

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
  return;
}

B

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

C

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete()
}

D

ngOnDestroy() {
  this.destroy$.next()
  this.destroy$.complete()
}

💡 Hint

Check for missing semicolons that cause syntax errors in TypeScript.

Option D is missing semicolons after method calls, which causes a syntax error in strict TypeScript settings, preventing compilation.