¿Cuáles son los lifecycle hooks de componentes en Angular?

Question

Accepted Answer

**Lifecycle hooks** son métodos que Angular llama en momentos específicos en la vida de un componente — creación, cambios de inputs, renderizado y destrucción. Los implementas agregando métodos de interfaz a tu clase de componente.

## Los hooks principales en orden

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## La secuencia completa

```text
constructor          → DI happens; inputs NOT yet available
ngOnChanges          → when @Input values are set/changed
ngOnInit             → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck            → every change detection run (custom change detection)
ngAfterContentInit   → projected content (<ng-content>) initialized
ngAfterViewInit      → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked   → after each view check
ngOnDestroy          → before removal ★ (unsubscribe, clear timers)
```

## Los tres que más usas

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // prevent memory leaks!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — el lugar estándar para inicialización y obtención de datos (a diferencia del constructor, aquí `@Input`s están disponibles).
- **`ngAfterViewInit`** — cuando existen child views y referencias `@ViewChild`.
- **`ngOnDestroy`** — limpieza: desuscribirse de Observables, limpiar temporizadores, eliminar listeners.

## Por qué ngOnInit en lugar del constructor

El constructor solo debe hacer DI; los inputs aún no están vinculados aquí. `ngOnInit` se ejecuta después de que Angular haya configurado el componente y sus inputs — el lugar correcto para la lógica de inicio.

## Por qué es importante

Los lifecycle hooks te permiten ejecutar lógica en el momento correcto — inicializa en `ngOnInit`, accede a la vista renderizada en `ngAfterViewInit`, y crucialmente **limpia en `ngOnDestroy`** (desuscribirse de Observables es la mejor forma de evitar memory leaks en Angular).

Conocer el orden y el rol de cada hook es esencial para obtención correcta de datos, acceso al DOM y gestión de recursos.