How to Use ngOnDestroy in Angular

import { Component, OnInit, OnDestroy } from '@angular/core'
import { Subscription, interval } from 'rxjs'
import { DataService } from './data.service'

@Component({
  selector: 'app-user-dashboard',
  template: `
    <div>
      <h2>{{ title }}</h2>
      <p>Data updates: {{ updateCount }}</p>
      <div *ngFor="let item of data">{{ item.name }}</div>
    </div>
  `
})
export class UserDashboardComponent implements OnInit, OnDestroy {
  title = 'User Dashboard'
  data: any[] = []
  updateCount = 0

  private subscriptions = new Subscription()
  private intervalId: number

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // Subscribe to data updates
    const dataSub = this.dataService.getData().subscribe(data => {
      this.data = data
    })
    this.subscriptions.add(dataSub)

    // Set up polling
    const pollingSub = interval(5000).subscribe(() => {
      this.updateCount++
      this.dataService.refreshData()
    })
    this.subscriptions.add(pollingSub)

    // Set up timer
    this.intervalId = window.setInterval(() => {
      console.log('Component is active')
    }, 10000)

    // Add global event listener
    window.addEventListener('resize', this.handleResize)
  }

  ngOnDestroy(): void {
    // Unsubscribe from all observables
    this.subscriptions.unsubscribe()

    // Clear timers
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }

    // Remove global event listeners
    window.removeEventListener('resize', this.handleResize)

    console.log('Component cleanup completed')
  }

  private handleResize = (): void => {
    console.log('Window resized')
  }
}