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

@Component({
  selector: 'app-ticker',
  standalone: true,
  template: `<p>Ticker running — check the console.</p>`,
})
export class TickerComponent implements OnInit, OnDestroy {
  private sub?: Subscription;
  private count = 0;

  ngOnInit() {
    this.sub = interval(1000).subscribe(() => {
      this.count++;
      console.log('tick', this.count);
    });
  }

  ngOnDestroy() {
    console.log('TickerComponent destroyed — unsubscribing');
    this.sub?.unsubscribe();
  }
}

// app.component.ts
import { Component } from '@angular/core';
import { TickerComponent } from './ticker.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TickerComponent],
  template: `
    <button (click)="show = !show">Toggle ticker</button>
    @if (show) {
      <app-ticker></app-ticker>
    }
  `,
})
export class AppComponent {
  show = true;
}

/*
  Notes:
  - interval(1000) is an Observable emitting every second; the
    subscription is stored so it can be torn down later.
  - Toggling @if to false removes TickerComponent from the DOM, which
    triggers ngOnDestroy — without the unsubscribe() there, the
    interval would keep logging "tick" forever even after the component
    is gone (a memory leak), exactly the issue Chapter 11 warned about.
  - The async pipe or takeUntilDestroyed() would remove the need to
    manage this Subscription by hand; this shows the explicit version.
*/