Observable in component lifecycle in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to subscribe to the observable in the component.

Angular

this.dataService.getData().[1](data => {
  this.items = data;
});

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

Apipe

Bmap

Cfilter

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' or 'filter' instead of 'subscribe' to get data.

Trying to call 'pipe' without subscribing.

The subscribe method is used to listen to observable data and react when data arrives.

2fill in blank

medium

Complete the code to unsubscribe from the observable when the component is destroyed.

Angular

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

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

Aunsubscribe

Bsubscribe

Ccomplete

Dnext

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'subscribe' again instead of 'unsubscribe'.

Using 'complete' which only signals completion but does not unsubscribe.

The unsubscribe method stops the observable subscription to prevent memory leaks.

3fill in blank

hard

Fix the error in the code to properly assign the subscription.

Angular

this.[1] = this.dataService.getData().subscribe(data => {
  this.items = data;
});

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

Aobserver

Bdata

Csubscription

Dobservable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'observable' which is the source, not the subscription.

Using 'observer' which is the listener, not the subscription.

The subscription object should be stored in a variable named subscription to manage it later.

4fill in blank

hard

Fill both blanks to create a safe subscription that unsubscribes automatically.

Angular

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new [1]();

this.dataService.getData()
  .pipe([2](this.destroy$))
  .subscribe(data => {
    this.items = data;
  });

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

ASubject

BObservable

CtakeUntil

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Observable' instead of 'Subject' for the notifier.

Using 'subscribe' inside pipe instead of 'takeUntil'.

Using a Subject as a notifier and the takeUntil operator ensures the subscription ends when destroy$ emits.

5fill in blank

hard

Fill all three blanks to complete the component lifecycle with observable cleanup.

Angular

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnDestroy {
  private [1] = new Subject<void>();

  constructor(private dataService: DataService) {
    this.dataService.getData()
      .pipe([2](this.[1]))
      .subscribe(data => {
        console.log(data);
      });
  }

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

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

Adestroy$

BtakeUntil

Cnext

Dunsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'unsubscribe' on the Subject instead of 'next'.

Using wrong variable names or missing the operator.

The destroy$ Subject emits a signal with next() in ngOnDestroy, and takeUntil uses it to complete the subscription safely.