Subscribing to observables in Angular - Mini Project: Build & Apply

Subscribing to observables

📖 Scenario: You are building a simple Angular component that fetches user data from a service. The service returns an observable that emits user information asynchronously.

🎯 Goal: Create an Angular standalone component that subscribes to an observable from a user service and stores the user data in a component variable to display it.

📋 What You'll Learn

Create a user data object with exact properties

Create a boolean flag to track loading state

Subscribe to the observable from the user service using subscribe()

Assign the received user data to the component variable

Set the loading flag to false after data is received

💡 Why This Matters

🌍 Real World

Fetching data asynchronously from a backend service is common in web apps. Observables let Angular apps react to data changes smoothly.

💼 Career

Understanding how to subscribe to observables and update UI is essential for Angular developers working with APIs and real-time data.

1

Create user data object

Create a component property called user initialized to an object with these exact properties: name as an empty string, email as an empty string.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `User component works!`
})
export class UserComponent {
  // Create user object with name and email properties
  
}

Hint

Think of user as a box to hold the user's name and email. Start it empty.

2

Add loading flag

Add a boolean component property called isLoading and set it to true to indicate data is loading.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `User component works!`
})
export class UserComponent {
  user = { name: '', email: '' };
  // Add isLoading flag set to true
}

Hint

This flag will help show if the data is still loading or ready.

3

Subscribe to user observable

Inject a service called UserService in the constructor. Then, inside the constructor, subscribe to this.userService.getUser() observable. Use userData as the subscription parameter and assign it to this.user. Also set this.isLoading to false inside the subscription.

Angular

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `User component works!`
})
export class UserComponent {
  user = { name: '', email: '' };
  isLoading = true;

  constructor(private userService: UserService) {
    // Subscribe to userService.getUser() observable
  }
}

Hint

Think of subscribing as listening for the user data to arrive. When it does, save it and mark loading as done.

4

Display user data in template

Update the component template to show a loading message when isLoading is true. When loading is false, display the user's name and email inside <p> tags.

Angular

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
    
  `
})
export class UserComponent {
  user = { name: '', email: '' };
  isLoading = true;

  constructor(private userService: UserService) {
    this.userService.getUser().subscribe(userData => {
      this.user = userData;
      this.isLoading = false;
    });
  }
}

Hint

Use Angular's *ngIf directive to show loading text or user info depending on the loading state.

Practice

1. What does subscribing to an observable in Angular allow you to do?

easy

A. React to data or events over time

B. Create new components automatically

C. Change the Angular version

D. Compile TypeScript to JavaScript

Solution

1. Step 1: Understand the purpose of observables

   Observables emit data or events over time, like a stream of values.

2. Step 2: Role of subscribing

   Subscribing lets you listen and react to these emitted values as they arrive.

3. Final Answer:

   React to data or events over time -> Option A

4. Quick Check:

   Subscribing = Reacting to data/events [OK]

Hint: Subscribing means listening to data changes over time [OK]

Common Mistakes:

• Thinking subscribing creates components
• Confusing subscribing with compilation
• Believing subscribing changes Angular version

2. Which is the correct syntax to subscribe to an observable named data$ in Angular?

easy

A. data$.subscribe(value => console.log(value));

B. data$.subscribe = value => console.log(value);

C. subscribe(data$ => console.log(data$));

D. data$.subscribe(console.log());

Solution

1. Step 1: Identify correct subscribe method usage

   The subscribe method is called on the observable with a callback function.

2. Step 2: Check syntax correctness

   data$.subscribe(value => console.log(value)); correctly calls data$.subscribe with an arrow function receiving the emitted value.

3. Final Answer:

   data$.subscribe(value => console.log(value)); -> Option A

4. Quick Check:

   Correct subscribe syntax = data$.subscribe(value => console.log(value)); [OK]

Hint: Use observable.subscribe(callback) to listen [OK]

Common Mistakes:

• Assigning subscribe instead of calling it
• Calling subscribe as a standalone function
• Calling console.log() prematurely

3. Given this code snippet:

const obs$ = of(1, 2, 3);
obs$.subscribe({
  next: x => console.log(x),
  error: err => console.error(err),
  complete: () => console.log('Done')
});

What will be the console output?

medium

A. Done 1 2 3

B. 1 2 3 Done

C. 1 2 3

D. Error

Solution

1. Step 1: Understand observable emissions

   The observable emits values 1, 2, 3 in sequence.

2. Step 2: Analyze subscription callbacks

   The next callback logs each value, then complete logs 'Done'.

3. Final Answer:

   1 2 3 Done -> Option B

4. Quick Check:

   Values then complete message = 1 2 3 Done [OK]

Hint: next logs values, complete logs 'Done' after all [OK]

Common Mistakes:

• Assuming complete logs before values
• Ignoring complete callback
• Expecting error without error emission

4. What is wrong with this subscription code?

this.data$.subscribe(data => {
  this.value = data;
});
// No unsubscribe called anywhere

medium

A. It will unsubscribe automatically

B. It will throw a syntax error

C. It will cause a memory leak if component is destroyed

D. It will not receive any data

Solution

1. Step 1: Identify subscription management

   The code subscribes but never unsubscribes, risking resource leaks.

2. Step 2: Understand Angular component lifecycle

   Without unsubscribing, the subscription stays active after component destruction, causing memory leaks.

3. Final Answer:

   It will cause a memory leak if component is destroyed -> Option C

4. Quick Check:

   Missing unsubscribe = memory leak risk [OK]

Hint: Always unsubscribe to avoid memory leaks [OK]

Common Mistakes:

• Assuming Angular unsubscribes automatically
• Thinking no data will be received
• Confusing syntax errors with runtime issues

5. You want to subscribe to two observables obs1$ and obs2$ and combine their latest values whenever either emits. Which RxJS operator should you use before subscribing?

hard

A. filter

B. map

C. catchError

D. combineLatest

Solution

1. Step 1: Understand the need to combine latest values

   You want to react to the latest values from both observables whenever either emits.

2. Step 2: Identify the correct RxJS operator

   combineLatest emits an array of latest values from all observables whenever any emits.

3. Final Answer:

   combineLatest -> Option D

4. Quick Check:

   Combine latest values = combineLatest operator [OK]

Hint: Use combineLatest to merge latest values from multiple observables [OK]

Common Mistakes:

• Using map which transforms but doesn't combine
• Using filter which only filters emissions
• Using catchError which handles errors, not combining