Hoje vamos ver o que é o lifecycle hook e como usar, porém precisamos entender um pouco do ciclo de vida (lifecycle) do Angular.

Vamos pensar no ciclo de vida como o que conhecemos mesmo, nascemos, vivemos e morremos, o Angular também trabalha desta forma, usamos várias fases desde criação até a destruição do componente ou o que quer que seja.

E não necessariamente ao carregar a aplicação todos os ciclos de vida são ativados ao mesmo tempo, podemos chamar um componente ao realizar determinada ação e assim dar início ao ciclo de vida dele. Então o Angular nos fornece ganchos (Hooks) para lidar com essas situações, e a ordem de execução é a seguinte:

• ngOnInit: é executado uma vez quando o componente é inicializado;
• ngOnChanges: executado também uma vez na criação do componente e toda vez que ele sofrer alguma mudança;
• ngDoCheck: executado a cada mudança que o ngOnChange não detecta;
• ngOnDestroy: executado na destruição do componente.

Além desses existem outros quatros hooks dentro do ngDoCheck:

• ngAfterContentInit: sempre que um conteúdo vindo de uma fonte externa do componente é inserido;
• ngAfterContentChecked: quando o conteúdo externo é verificado;
• ngAfterViewInit: executado logo após os dados dos filhos e do próprio componente ser inicializado;
• ngAfterViewChecked: sempre que é detectado uma alteração do conteúdo é chamado esse cara.

Funcionamento do Lifecycle Hook

Para a gente iniciar um hook, devemos atender a duas coisas e são elas fazer a implementação da interface do hook e criar o método especial com seu nome.

Vamos ver como seria a criação de um ngOnInit():

import { Component, OnInit } from '@angular/core';
@Component({...})
export class AppComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log('Olá, mundo');
  }
}

Podemos notar que o nome dado a interface do OnInit é a mesma do método, porém sem o ng na frente dele, assim facilitando o entendimento da situação e assim segue para todos os outros hooks.

Uma dica de boas práticas, sempre faça a implementação da interface, mesmo que não seja obrigatório para o funcionamento. E caso queira utilizar mais de um hook fica assim as importações e chamadas:

import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({...})
export class AppComponent implements OnInit, OnDestroy {
  constructor() { }
  ngOnInit() {
    console.log('Olá, mundo');
  }

  ngOnDestroy() {
    console.log(“Tchau”);
 }
}

OnInit

• ngOnInit: é executado uma vez quando o componente é inicializado;

O OnInit é excelente caso você precise fazer muitas coisas antes de inicializar o componente, podendo ser algum tipo de configuração.

Também usamos eles para atribuir Observables nas variáveis de componente, parâmetros de rotas também é muito legal de se usar aqui caso queira recuperar algum tipo de informação vindo delas.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({...})
export class ExemploComponent implements OnInit {
 
  pag: string; // Só um exemplo que pode mudar...
 
  constructor(private route: ActivatedRoute) { }
 
  ngOnInit() {
    this.route.params.subscribe(
      (params: any) => this.pag= params['pag'];
    );
  }
}

Usamos também em alguns reactive forms e precisamos de alguns passos para funcionar, começamos criando um objeto FormGroup junto com o serviço de FormBuilder.

Vamos dar uma olhada na sintaxe da coisa:

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
 
@Component({...})
export class MeuFormulario implements OnInit {
 
  @Input() defaultDescription: string;
  formulario: FormGroup;
 
  constructor(private formbuilder: FormBuilder) { }
 
  ngOnInit() {
    this.formulario = this.formBuilder.group({
      description: [this.defaultDescription] 
    });
  }
}

Não podemos esquecer de iniciar o formgroup dentro do OnInit para os valores não iniciarem como Undefined e assim evitando erros.

OnChanges

• ngOnChanges: executado também uma vez na criação do componente e toda vez que ele sofrer alguma mudança;

Vamos ver um exemplo de como usar e como funciona:

import { Component, OnChanges, Input } from '@angular/core';
 
@Component({...})
export class ExemploComponent implements OnChanges {
 
  @Input() name: string;
  fName: string;
 
  ngOnChanges() {
    this.fName= name + “Troquatte”;
  } 
}

Nessa lógica ao digitar o seu nome no campo e atualizar ele vai aparecer junto com o “Troquatte” e assim o OnChange é chamado.Vale ressaltar que o OnChange também pode receber um parâmetro opcional chamado “SimpleChanges” que contém os valores do “@Input()”, vamos dar uma olhada na sintaxe dele.

interface SimpleChanges {
  [propName: string]: SimpleChange;
}

E segue as propriedades:

interface SimpleChange {
  currentValue: any;
  previousValue: any;
  firstChange: boolean;
  isFirstChange(): boolean;
}

Vou falar um pouco sobre cada propriedade:

• CurrentValue: contém o valor que está no Input no momento;
• PreviousValue: contém o valor de Input antes de qualquer tipo de atualização no conteúdo dele;
• FirstChange: retorna true ou false caso seja a primeira alteração sofrida no conteúdo;
• IsFristChange: outro método que retorna true se for a primeira alteração sofrida no conteúdo.

DoCheck

• ngDoCheck: executado a cada mudança que o ngOnChange não detecta;

DoCheck é um gancho de ciclo de vida usado para invocar uma função de detecção de alterações personalizada para uma diretiva.

O Angular dispara o gancho DoCheck após cada detecção de alteração.

DoCheck é usada para capturar quaisquer alterações dentro do componente angular que não podem ser capturadas de outra maneira, então basicamente esta função “ngDoCheck()” será executada toda vez que houver algum tipo de alteração no Componente Angular.

Ele será executado quando um valor de variável for alterado para que coisas básicas também possam ser capturadas desta função.

Portanto, neste método, estamos lidando com todos os tipos de coisas com instruções if-else. pois a função será executada toda vez que houver uma alteração no componente então aqui está um código de exemplo que você pode conferir.

ngDoCheck e ngOnChanges não devem ser implementados juntos no mesmo componente.

OnDestroy

• ngOnDestroy: executado na destruição do componente.

Por fim, mas não menos importante vamos falar um pouco do “OnDestroy”, que é startado antes do componente ser finalizado ou destruído (por conta do nome) e assim temos uma maneira de liberar ciclos lógicos completos.

Com o “OnDestroy” podemos evitar também memory leak e assim problemas de desempenho e quem sabe até erros em projetos.

Uma das principais causas de memory leak em Angular é com o Observable assinamos ele e depois não destruímos, deixando assim ele consumindo memória atoa. Imagina que esse componente é iniciado e destruído 3 vezes, vamos ficar com 3 Observables em memória que não estão sendo usados.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserService } from './user.service';
import { Subscription } from 'rxjs';
 
@Component({...})
export class UserComponent implements OnInit, OnDestroy {
 
  subUser: Subscription;
 
  constructor(private userService: UserService) { }
 
  ngOnInit() {
    this.subUser = this.userService.getUser().subscribe(
      (user: any) => console.log(`Usuário logado: ${user}`);
    );
  }
 
  ngOnDestroy() {
    if (this.subUser) {
      this.subUser.unsubscribe();
    }
  }
}

Aqui usamos o “unsubscribe()” e o “ngOnDestroy()” para resolver esses problemas de cancelamento de assinatura.

Lembrando que para uso de HTTP você não precisa destruir o subscribe ele se destroi sozinho!

Nesse post vimos uma parte muito importante no desenvolvimento Angular, lidamos bastante com desempenho e também com o controle total dos componentes e suas mudanças ao longo da vida dele. Como evitar alguns erros de iniciar algum valor como Undefined.