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
  
}

Need a 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
}

Need a 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
  }
}

Need a 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;
    });
  }
}

Need a hint?

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