# 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:

![](/files/-Let0g9o9vbLTZzPZTh4)

Y luego de apretar el boton:

![](/files/-Let0g9qmqv-j03rVlPH)

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jorgeucano.gitbook.io/entendiendo-angular/capitulo-10-lifecycle/capitulo-9-lifecycle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.