Escrito el 22/03/2024

Fundamentos de Angular: LifeCycle

Los cambios de estados de cada componente en angular se pueden entender en el siguiente gráfico. y cada cuadrado corresponde a un Hooks el cuál podemos utilizar.

Lifecycle
After component & child Projection
ngDestroy
ContentProjected
ngOnChanges
Component
Legend
Types
State / Moment
Colors
Every Change Detection
Only First Time
1
Constructor
2
ngOnChanges
3
ngOnInit
4
ngOnDoCheack
5
ngAfterContentInit
6
11
ngAfterContentChecked
7
ngAfterViewInit
12
8
ngAfterViewChecked
10
ngDoCheck
9

Hooks

  • ngOnChanges: cuando un valor de input o output cambia.
  • ngOnInit: Después del primero ngOnChanges.
  • ngDoCheck: Se utiliza para implementar un change detection particular.
  • ngAfterContentInit: Después de que el contenido del componente es inicializado.
  • ngAfterContentChecked: Después de cada validación de contenido del componente.
  • ngAfterViewInit: Después de que la vista del componente es inicializado.
  • ngAfterViewChecked: Después de cada chequeo de vista del componente.
  • ngOnDestroy: Justo antes de que el componente o directiva es destruido.