¿Qué es lo que ocurre cuando creamos un componente en Angular?

Al crear un nuevo componente o una directiva en Angular se genera una nueva instancia del componente/directiva que es agregada al DOM. Este proceso de creación se desarrolla en varios eventos diferentes que nos ofrecen la oportunidad de introducir nuestro código en cada una de las etapas de creación, actualización y destrucción.

Cada una de las etapa se denomina lifecycle hook event o ‘evento de enlace de ciclo de vida’.

Y si hablamos de creación de componentes, no nos podemos olvidar del constructor, que se ejecuta antes que cualquier lifecycle hook, por lo que en caso de que necesitemos inyectar alguna dependencia al componente este será el mejor lugar para hacerlo.

Una vez ejecutado el constructor, Angular comenzará a ejecutar la secuencia los lifecycle hook events en un orden específico.

Lifecycle Method (Métodos de Ciclo de Vida)

Antes de entrar en el detalle de cada etapa, podemos observar que los eventos se pueden clasificar en función de si están vinculados al propio componente o si están vinculados al contenido externo de nuestro componente, ya sean los hijos (se expresa así?) Es una traducción directa de ‘child’ o ‘children’ o contenido proyectado.

También los podemos clasificar en funcióón de si los eventos son únicos o pueden ejecutarse un número indefinido de veces.

Veamos qué tipo de operaciones podemos ejecutar en cada evento:

ngOnChanges: Es llamado antes de ngOnInit() y cada vez que una o varias propiedades vinculada(s) a un @input() cambian de valor. Este método recibe un objeto ‘SimpleChanges’ con el valor anterior y el valor actual de las propiedades, lo que nos permite reaccionar ante cambios en los valores de cualquier propiedad que sea una entrada a nuestro componente.

Nota: ngOnChange puede ser ejecutado con mucha frecuencia, por lo que las operaciones que realicemos durante su llamada pueden afectar notablemente el rendimiento.

ngOnInit: Es el evento constructor. Se invocará sólo una vez, después del primer ngOnChanges y después de que Angular haya desplegado los ‘data-bound properties’ o se haya inicializado el componente. ngOnInit nos permite ejecutar inicializaciones más complejas como la obtención de datos.
ngDoCheck: Se ejecutará inmediatamente después de cada ngOnChange en cada ciclo de detección o inmediatamente después de ngOnInit en el primer ciclo. Es decir, cada vez que se produzca un cambio, ngDoCheck entra en acción. Esto permite detectar y actuar ante cambios que Angular no va o no puede detectar por sí mismo.
ngAfterContentInit: Para poder actuar sobre contenido externo que ha sido proyectado sobre la vista del componente o sobre la vista a la que pertenece la directiva, tenemos el evento ngAfterContentInit, que es ejecutado después del primer ngDoCheck.
ngAfterContentCheck: Es invocado al finalizar el evento ngAfterContentInit y cualquier ngDoCheck en los posteriores ciclos. Esto nos permitirá aplicar una detección de cambios sobre el contenido proyectado en nuestro componente.
ngAfterViewInit: Siguiendo los mismo pasos que los eventos sobre AfterContent, este evento es llamado después del primer ngAfterContentCheck, lo que nos permite actuar después de que Angular haya inicializado la vista del componente y de sus hijos o la vista que contiene la directiva

ngAfterViewChecked: Es ejecutado después de ngAfterViewInit y cualquier ngAfterContentCheck en los posteriores ciclos. Esto nos permitirá aplicar una detección de cambios sobre la vista del componente y la de los hijos o la vista que contiene la directiva.
ngOnDestroy: Justo antes de destruir un componente o una directiva se invoca a este evento lo que nos permite desengancharnos de cualquier evento u Observable al que esté vinculado el componente y evitar posible fuente de fugas de memoria.