Live price ticker widget
Angular · Angular · intermediate · greenfield
Adds the price ticker: subscribes to the live price stream on init and updates the displayed price on each tick. Standalone component, renders the latest value.
PriceService.stream returns a long-lived Observable (a websocket feed). Users open and close dozens of instruments per session, mounting a fresh ticker each time.
Requirements
- Subscribe to PriceService.stream(symbol) and show the latest price.
- The widget mounts and unmounts as the user opens and closes instruments.
- Follow the codebase convention: standalone components, no leaked subscriptions.
Files touched
- src/app/widgets/price-ticker.ts
--- src/app/widgets/price-ticker.ts
+import { Component, Input, OnInit, signal, inject } from '@angular/core';
+import { PriceService } from '../services/price.service';
+
+@Component({
+ selector: 'app-price-ticker',
+ template: `<span class="price">{{ price() }}</span>`,
+})
+export class PriceTicker implements OnInit {
+ private prices = inject(PriceService);
+
+ @Input({ required: true }) symbol!: string;
+ price = signal<number | null>(null);
+
+ ngOnInit(): void {
+ this.prices.stream(this.symbol).subscribe((p) => this.price.set(p));
+ }
+}