Project 21: Music Player UI
Angular Engineer
Builds on these lessons
Component Task
Objective
A Subject is both an Observable and a way to manually push values into it with .next() — a common bridge between an imperative event (a click) and a reactive stream.
You're building a music player's play button.
Task: write a PlayerComponent with a play$ Subject that a button pushes 'track-1' into on click, subscribed in the constructor to log whatever track plays.
component.ts
import { Component } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
selector: 'app-player',
standalone: true,
template: `<button (click)="play$.next('track-1')">Play</button>`
})
export class PlayerComponent {
play$ = new Subject<string>();
constructor() {
this.play$.subscribe(track => console.log('Now playing:', track));
}
}
* Hint: Correct characters turn green, incorrect ones turn red.
Compiler Output
🅰️
Compile your component to see the result