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.

Practice

1. What is the main reason to subscribe to an Observable inside the ngOnInit lifecycle hook in an Angular component?

easy

A. To start listening to data streams when the component is initialized

B. To stop listening to data streams when the component is destroyed

C. To create a new Observable instance

D. To update the component's template directly

Solution

1. Step 1: Understand ngOnInit role

   ngOnInit runs once when the component is created, ideal to start tasks like subscribing to Observables.

2. Step 2: Purpose of subscribing in ngOnInit

   Subscribing here means the component begins listening to data streams as soon as it is ready.

3. Final Answer:

   To start listening to data streams when the component is initialized -> Option A

4. Quick Check:

   Subscribe in ngOnInit = start listening [OK]

Hint: Subscribe in ngOnInit to start data listening early [OK]

Common Mistakes:

• Subscribing in ngOnDestroy instead of ngOnInit
• Expecting subscription to stop automatically
• Confusing subscription with Observable creation

2. Which of the following is the correct way to unsubscribe from an Observable in the ngOnDestroy lifecycle hook?

easy

A. this.subscription.unsubscribe();

B. this.subscription.subscribe();

C. this.subscription.complete();

D. this.subscription.destroy();

Solution

1. Step 1: Identify the unsubscribe method

   Angular subscriptions have an unsubscribe() method to stop listening to Observables.

2. Step 2: Match method to lifecycle hook

   In ngOnDestroy, calling unsubscribe() properly cleans up the subscription.

3. Final Answer:

   this.subscription.unsubscribe(); -> Option A

4. Quick Check:

   Unsubscribe method = unsubscribe() [OK]

Hint: Use unsubscribe() to stop Observable listening [OK]

Common Mistakes:

• Using subscribe() instead of unsubscribe() to stop
• Calling complete() which does not unsubscribe
• Using a non-existent destroy() method

3. Consider this Angular component code snippet:

export class TimerComponent implements OnInit, OnDestroy {
  time = 0;
  private subscription!: Subscription;

  ngOnInit() {
    this.subscription = interval(1000).subscribe(() => {
      this.time++;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

What will be the value of time after 3 seconds if the component is displayed and then removed?

medium

A. undefined

B. 3

C. 0

D. Subscription error

Solution

1. Step 1: Understand the interval Observable

   The interval(1000) emits a value every 1000 milliseconds (1 second), triggering the subscription callback.

2. Step 2: Count increments before unsubscribe

   After 3 seconds, the callback runs 3 times, incrementing time from 0 to 3. The unsubscribe in ngOnDestroy stops further increments.

3. Final Answer:

   3 -> Option B

4. Quick Check:

   3 seconds = 3 increments [OK]

Hint: Count interval ticks before unsubscribe stops updates [OK]

Common Mistakes:

• Assuming time stays 0 without increments
• Expecting error due to missing unsubscribe
• Confusing unsubscribe timing with immediate stop

4. Identify the error in this Angular component code:

export class DataComponent implements OnInit {
  data$ = this.service.getData();

  ngOnInit() {
    this.data$.subscribe(data => {
      console.log(data);
    });
  }
}

What is the main problem here?

medium

A. Observable should not be assigned to a property

B. Subscription syntax is incorrect

C. Missing unsubscribe in ngOnDestroy causes memory leak

D. ngOnInit should not contain subscriptions

Solution

1. Step 1: Check subscription management

   The code subscribes to an Observable but never unsubscribes, risking memory leaks.

2. Step 2: Lifecycle hook missing unsubscribe

   Without ngOnDestroy to unsubscribe, the subscription stays active even after component destruction.

3. Final Answer:

   Missing unsubscribe in ngOnDestroy causes memory leak -> Option C

4. Quick Check:

   Always unsubscribe to avoid leaks [OK]

Hint: Always unsubscribe in ngOnDestroy to prevent leaks [OK]

Common Mistakes:

• Thinking subscription syntax is wrong
• Believing Observables can't be class properties
• Assuming ngOnInit forbids subscriptions

5. You want to create an Angular component that listens to a user input Observable and updates a display value. The Observable may emit multiple times quickly. Which approach best manages the subscription lifecycle and avoids memory leaks?

hard

A. Use a global variable to store data and avoid subscribing

B. Subscribe in the constructor and never unsubscribe

C. Subscribe in ngOnInit without unsubscribing, relying on Angular to clean up

D. Subscribe in ngOnInit and unsubscribe in ngOnDestroy using a Subscription object

Solution

1. Step 1: Proper subscription management

   Subscribing in ngOnInit ensures the component starts listening after creation.

2. Step 2: Unsubscribe in ngOnDestroy to prevent leaks

   Unsubscribing cleans up resources when the component is removed, avoiding memory leaks.

3. Final Answer:

   Subscribe in ngOnInit and unsubscribe in ngOnDestroy using a Subscription object -> Option D

4. Quick Check:

   Subscribe ngOnInit + unsubscribe ngOnDestroy = safe lifecycle [OK]

Hint: Pair subscribe in ngOnInit with unsubscribe in ngOnDestroy [OK]

Common Mistakes:

• Subscribing in constructor which is too early
• Not unsubscribing and causing leaks
• Using global variables instead of Observables