Angular Lifecycle Hooks

Component Created
      ↓
  ngOnChanges()     ← Fires when @Input property changes
      ↓
  ngOnInit()        ← Fires ONCE after component is initialized
      ↓
  ngDoCheck()       ← Fires on every change detection cycle
      ↓
  ngAfterViewInit() ← Fires after component's view (template) is rendered
      ↓
  [On each @Input change] → ngOnChanges() again
      ↓
Component Destroyed
      ↓
  ngOnDestroy()     ← Fires just before component is removed from DOM

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({ selector: 'app-user-list', templateUrl: './user-list.component.html' })
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {
    // Good: Only dependency injection here
  }

  ngOnInit(): void {
    // Good: Data fetching and initialization here
    this.userService.getUsers().subscribe(users => {
      this.users = users;
    });
  }
}

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({ selector: &#039;app-user-card&#039;, template: &#039;<p>{{ user?.name }}</p>&#039; })
export class UserCardComponent implements OnChanges {
  @Input() user: any;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes[&#039;user&#039;]) {
      const previousUser = changes[&#039;user&#039;].previousValue;
      const currentUser = changes[&#039;user&#039;].currentValue;
      console.log(&#039;User changed from&#039;, previousUser, &#039;to&#039;, currentUser);
    }
  }
}

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

@Component({ selector: &#039;app-timer&#039;, template: &#039;<p>Timer: {{ count }}</p>&#039; })
export class TimerComponent implements OnInit, OnDestroy {
  count: number = 0;
  private timerSub!: Subscription;

  ngOnInit(): void {
    this.timerSub = interval(1000).subscribe(() => {
      this.count++;
    });
  }

  ngOnDestroy(): void {
    // Critical! Unsubscribe when component is destroyed
    this.timerSub.unsubscribe();
    console.log(&#039;TimerComponent destroyed, subscription cleaned up.&#039;);
  }
}

import { AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class FocusInputComponent implements AfterViewInit {
  @ViewChild('searchInput') searchInput!: ElementRef;

  ngAfterViewInit(): void {
    // The template is fully rendered here, safe to access DOM elements
    this.searchInput.nativeElement.focus();
  }
}

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class MyComponent {
  constructor(private userService: UserService) {
    // Automatically unsubscribes when component is destroyed!
    this.userService.getUsers()
      .pipe(takeUntilDestroyed())
      .subscribe(users => this.users = users);
  }
}