Why observables matter in Angular - See It in Action

Why observables matter in Angular

📖 Scenario: You are building a simple Angular app that shows live updates of a user's score in a game. The score changes over time, and you want the app to update the display automatically whenever the score changes.

🎯 Goal: Build a small Angular component that uses an observable to track the user's score and updates the displayed score automatically when it changes.

📋 What You'll Learn

Create a signal to hold the initial score

Create an observable that emits new score values

Subscribe to the observable and update the signal when a new score arrives

Display the current score in the component template

💡 Why This Matters

🌍 Real World

Many apps need to show live data like scores, notifications, or sensor readings. Observables let Angular handle these updates efficiently and reactively.

💼 Career

Understanding observables and signals is key for Angular developers to build responsive, maintainable apps that handle asynchronous data streams.

1

Set up the initial score signal

Create a signal called score and set its initial value to 0 inside the Angular component.

Angular

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

@Component({
  selector: 'app-score',
  template: `Score: {{ score() }}`
})
export class ScoreComponent {
  // Create a signal called score with initial value 0
  // Your code here
}

Need a hint?

Use signal(0) to create a reactive value that starts at zero.

2

Create an observable to emit new scores

Import interval from rxjs and map from rxjs/operators. Create an observable called scoreUpdates$ that emits a new score every second, increasing by 1 each time.

Angular

import { Component, signal } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-score',
  template: `Score: {{ score() }}`
})
export class ScoreComponent {
  score = signal(0);

  // Create an observable called scoreUpdates$ that emits increasing numbers every second
  // Your code here
}

Need a hint?

Use interval(1000) to emit every second and map to add 1 to each emitted number.

3

Subscribe to the observable and update the signal

In the component constructor, subscribe to scoreUpdates$ and update the score signal with each new value.

Angular

import { Component, signal } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-score',
  template: `Score: {{ score() }}`
})
export class ScoreComponent {
  score = signal(0);

  scoreUpdates$ = interval(1000).pipe(
    map(n => n + 1)
  );

  constructor() {
    // Subscribe to scoreUpdates$ and update score signal
    // Your code here
  }
}

Need a hint?

Use subscribe on the observable and call this.score.set(newScore) inside the callback.

4

Complete the component template for accessibility

Add an aria-live="polite" attribute to the <h1> tag in the template to announce score changes to screen readers.

Angular

import { Component, signal } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-score',
  template: `Score: {{ score() }}`
})
export class ScoreComponent {
  score = signal(0);

  scoreUpdates$ = interval(1000).pipe(
    map(n => n + 1)
  );

  constructor() {
    this.scoreUpdates$.subscribe(newScore => {
      this.score.set(newScore);
    });
  }
}

Need a hint?

Add aria-live="polite" inside the <h1> tag to help screen readers announce updates.