10 - LifeCycle

Los ciclos de vida ( LifeCycle) de Angular se manejan a traves de cada uno de los componentes que creemos, para tener un poco mas de idea son HOOKS (un hook es una funcion que se ejecuta en un determinado momento por medio de una acción).

Los hooks que nos ofrece Angular son:

• OnInit

• OnDestroy

• DoCheck

• OnChanges

• AfterContentInit

• AfterContentChecked

• AfterViewInit

• AfterViewChecked

Para utilizarlos vamos a tener que usar un "patron" parecido:

Para ser "notificado" sobre los eventos hay que hacer:

1 - Declarar la directiva o componente e implementar la interfaz

2 - Declarar el metodo ( ej ngOnInit)

Todos los metodos contienen el prefix de ng... por ejemplo ngOnInit, ngAfterContentInit ... etc...

Cuando Angular sabe que implementamos en el componente esa función (por los hooks), las invoca en el momento que deben ser ejecutadas.

Ahora no es mandatorio poner el implements, si ya ingresas en tu componente la función angular entiende que la tiene que ejecutar directamente.

OnInit and OnDestroy

El hook OnInit se ejecuta cuando las propiedades de la/el directiva/componente ya han inicializado, y antes de que cualquier de las propiedades de la directiva/componente inicialicen.

Ejemplo

@Component({
    selector: 'on-init',
    template: `
        <div>
            Init / Destroy
        </div>
    `

})
class OnInitComponent{

    ngOnInit():void{
        console.log('on init ejecutado');
    }

    ngOnDestroy():void{
        console.log('on destroy ejecutado');
    }

}

Si a esto le agregamos funcionalidad y ruteo vamos a ver en que momento ejecuta los console log.

Esto lo podes ver en el tag : 'ng-on-init-destroy'

OnChanges

OnChanges es un hook que se llama cuando una o mas propiedades del componente cambian.

El metodo ngOnChanges recibe los parametros que tiene que mirar si cambian.

Para eso se puede ver en el ejemplo dentro del git "ejemplo02"

cree un proyecto nuevo con "Angular 4" en el cli ... e hice las siguientes modificaciones:

En el html del componente principal:

<h1>
  {{title}}
</h1>
<button (click)="changeTxt()"> Cambiar texto </button>
<home [textoNuevo]="textChange"></home>

En el componente de componente principal

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  textChange = 'Hola soy un texto';


  changeTxt(){
    this.textChange = 'Acabo de cambiarme';
  }
}

Claro, ya sabes que hice, tengo un componente que es input y lo vamos a usar para cambiar el texto y ver las diferencias... simplemente en el componente padre vamos a cambiar el texto con el boton.

Ahora veamos donde esta la magia, el componente hijo:

import { Component } from '@angular/core';

import { SimpleChanges } from '@angular/core';

import { Input } from '@angular/core';

import { OnChanges } from '@angular/core';

@Component({
    selector: 'home',
    templateUrl: 'home.cmp.html'
})
export class HomeComponent implements OnChanges{

    @Input() textoNuevo:string;


    firstTxt:string = '':
    secondTxt:string = '';

    ngOnInit(){
        this.firstTxt = textoNuevo;
    }


    changeLog = [];

    ngOnChanges(changes: SimpleChanges) {
        for (let propName in changes) {
            let chng = changes[propName];
            this.secondTxt = JSON.stringify(chng.currentValue);
        }
    }

}

Ahora si, entendamos un poco el código.. El hook es la funcion "ngOnChanges" quien es la que ejecuta el cambio, luego la funcion recibe un parametro ( usaremos change) que es del tipo SimpleChanges => este lo importamos arriba, lo que va a hacer eso, es tomar el cambio y darnos el contenido del cambio para que podamos trabajar en el.

Luego recorremos los cambios para mostrar el contenido anterior y el contenido actual, en nuestro html vamos a ver lo siguiente:

<h1> Home Component <h1>

<p *ngFor="let item of changeLog">
    {{item}}
<p>

Nada que tengamos que explicar a esta altura, ahora veamos lo que obtenemos:

Y luego de apretar el boton:

DoCheck

El sistema de notificación predeterminado implementado por OnChanges se activa cada vez que el mecanismo de detección de cambios en angular advierte que hubo un cambio en cualquiera de las propiedades de directiva.

Sin embargo, puede haber momentos en que la sobrecarga agregada por esta notificación de cambio puede ser demasiado, especialmente si el rendimiento es una preocupación.

Puede haber momentos en los que sólo queremos hacer algo en caso de que un elemento haya sido eliminado o agregado, o si sólo una propiedad particular cambió.

AfterContentInit

Este Hook se llama después de OnInit, justo después de la inicialización del contenido del componente o directiva ha terminado

AfterContentChecked

Funciona de manera similar, pero se llama después de la verificación de la directiva ha terminado. La comprobación, en este contexto, es la comprobación del sistema de detección de cambios.

Los otros dos hooks: AfterViewInit y AfterViewChecked se activan justo después del contenido de arriba, justo después de que la vista se haya inicializado completamente. Estos dos hooks sólo son aplicables a los componentes y no a las directivas.

@Component({

    selector: 'afters',

    template: `

            <div class="ui label">

                <i class="list icon"></i> Counter: {{ counter }}

            </div>

            <button class="ui primary button" (click)="inc()">Increment

</button>

`

})

class OtroCmp implements OnInit, OnDestroy, DoCheck, OnChange, AfterContentInit, AfterContentChecked,
                        AfterViewInit, AfterViewChecked){

                        countador: number;
                        constructor() {
                            console.log('constructor');     
                            this.counter = 1;
                        }

                        inc(){
                            console.log('inc');
                            this.counter += 1;
                        }

                        ngOnInit(){
                            console.log('ng on init');
                        }

                        ngOnDestroy(){
                            console.log('ngOnDestroy');
                        }

                        ngDoCheck(){
                            console.log('ngDoCheck');
                        }

                        ngOnChanges(){
                            console.log('ngOnChanges');
                        }

                        ngAfterContentInit(){
                            console.log('ngAfterContentInit');
                        }

                        ngAfterContentChecked(){
                            console.log('ngAfterContentChecked');
                        }

                        ngAfterViewInit(){
                            console.log('ngAfterViewInit');
                        }
                        ngAfterViewChecked(){
                            console.log('ngAfterViewChecked');
                        }
}

De esta forma veremos y sabremos que hacer con cada uno de nuestros hooks dependiendo de que necesitamos en nuestra aplicación.