Unsubscribing and memory leaks in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to unsubscribe from the observable in ngOnDestroy.

Angular

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

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

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

Aunsubscribe

Bsubscribe

Cdestroy

Dcomplete

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe() again instead of unsubscribe()

Forgetting to unsubscribe in ngOnDestroy

To avoid memory leaks, you must call unsubscribe() on your subscription when the component is destroyed.

2fill in blank

medium

Complete the code to use the takeUntil operator to manage unsubscription.

Angular

private destroy$ = new Subject<void>();

ngOnInit() {
  this.dataService.getData()
    .pipe([1](this.destroy$))
    .subscribe(data => this.handleData(data));
}

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

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

Amap

Bfilter

CtakeUntil

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map or filter which do not unsubscribe

Not calling next() and complete() on destroy$

The takeUntil operator unsubscribes automatically when the destroy$ emits, helping prevent memory leaks.

3fill in blank

hard

Fix the error in the code to properly unsubscribe from multiple subscriptions.

Angular

export class MyComponent implements OnDestroy {
  sub1 = this.service.getData1().subscribe();
  sub2 = this.service.getData2().subscribe();

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

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

Asubscribe

Bunsubscribe

Ccomplete

Ddestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe() instead of unsubscribe()

Trying to call complete() on subscriptions

Each subscription must be unsubscribed individually by calling unsubscribe() on them.

4fill in blank

hard

Fill both blanks to create a single Subscription to manage multiple subscriptions and unsubscribe properly.

Angular

export class MyComponent implements OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit() {
    this.subscriptions.add(this.service.getData1().subscribe());
    this.subscriptions.add(this.service.getData2().subscribe());
  }

  ngOnDestroy() {
    this.subscriptions.[1]();
    this.subscriptions = [2];
  }
}

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

Aunsubscribe

Bnew Subscription()

Csubscribe

Dcomplete

Attempts:

3 left

💡 Hint

Common Mistakes

Not resetting the subscriptions variable after unsubscribe

Calling subscribe() instead of unsubscribe()

Calling unsubscribe() on the combined subscription stops all inner subscriptions. Then resetting it to a new Subscription avoids reuse issues.

5fill in blank

hard

Fill all three blanks to correctly use the async pipe in the template and avoid manual unsubscription.

Angular

<div *ngIf="data$ | [1] as data">
  <p>{{data.name}}</p>
</div>

export class MyComponent {
  data$ = this.service.getData().[2]();

  ngOnDestroy() {
    // No manual unsubscription needed because of [3]
  }
}

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

Aasync

Bpipe

Casync pipe

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Manually subscribing and unsubscribing when using async pipe

Using subscribe() in the component without unsubscribing

The async pipe in the template automatically subscribes and unsubscribes from observables, so manual unsubscription in ngOnDestroy is not needed.