Project 22: Video Player Layout

Angular Engineer

Builds on these lessons

Component Task

Objective

A manually created subscription must be manually cleaned up — storing it and calling .unsubscribe() in ngOnDestroy prevents it from continuing to run after the component is gone.

You're building a video player's progress counter.

Task: write a VideoPlayerComponent that subscribes to an interval(1000) in ngOnInit to count elapsed seconds, and unsubscribes in ngOnDestroy.

component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-video-player',
  standalone: true,
  template: `<p>Progress: {{ seconds }}s</p>`
})
export class VideoPlayerComponent implements OnInit, OnDestroy {
  seconds = 0;
  private sub!: Subscription;

  ngOnInit() {
    this.sub = interval(1000).subscribe(() => this.seconds++);
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →