Ciclo de Vida de um Componente - Angular

Após a criação de um componente, o framework Angular chama uma série de métodos que representam diferentes etapas do ciclo de vida desse componente. A inicialização de um componente pode ser figurativamente representada da seguinte maneira:

Durante o processo de atualização de um componente, alguns eventos do ciclo de vida também são acionados:

Portanto, o componente passa pelas seguintes etapas do ciclo de vida:

• Construtor: Primeiro, o construtor do componente é executado.

• ngOnChanges: Chamado antes do método ngOnInit() durante a configuração inicial de propriedades vinculadas por meio do mecanismo de binding, e também em qualquer reinstalação ou alteração de seus valores. Este método recebe como parâmetro um objeto da classe SimpleChanges, que contém os valores anteriores e atuais das propriedades. Por exemplo, verificação de alterações:

  content_copy

  ngOnChanges(changes: SimpleChanges) {
        for (const inputName in changes) {
          const inputValues = changes[inputName];
          console.log(`Previous ${inputName} == ${inputValues.previousValue}`);
          console.log(`Current ${inputName} == ${inputValues.currentValue}`);
          console.log(`Is first ${inputName} change == ${inputValues.firstChange}`);
        }
    }

• ngOnInit: Chamado uma vez após o Angular inicializar todas as propriedades de entrada do componente com seus valores iniciais. Executado antes da inicialização do template do componente. Isso significa que, neste método, é possível atualizar o estado do componente com base em seus valores iniciais.

• ngDoCheck: Chamado em cada verificação de alterações nas propriedades do componente, logo após os métodos ngOnChanges e ngOnInit.

• ngAfterContentInit: Chamado uma vez após o método ngDoCheck() depois que todos os componentes filhos foram inicializados.

• ngAfterContentChecked: Chamado pelo Angular ao verificar alterações no conteúdo inserido no template do componente. Executado após o método ngAfterContentInit() e após cada chamada subsequente do método ngDoCheck().

• ngAfterViewInit: Chamado pelo Angular após a inicialização do template do componente, bem como do template dos componentes filhos. Executado apenas uma vez, logo após a primeira chamada do método ngAfterContentChecked().

• ngAfterViewChecked: Chamado pelo Angular após verificar mudanças no template do componente, assim como no template dos componentes filhos. Executado após a primeira chamada do método ngAfterViewInit() e após cada chamada subsequente do método ngAfterContentChecked().

• ngOnDestroy: Chamado antes de o Angular remover o componente.

• afterRender e afterNextRender: permitem executar código após a renderização do componente. O código dessas funções é chamado após o Angular concluir a renderização de todos os componentes na página no DOM. Essas funções se aplicam à aplicação como um todo e não a componentes individuais. Portanto, elas capturam o momento após a renderização de toda a aplicação e de todos os seus componentes.

A maioria desses métodos está definida em interfaces específicas, cujo nome corresponde ao nome do método sem o prefixo "ng". Por exemplo, o método ngOnInit está definido na interface OnInit. Portanto, se quisermos monitorar determinadas etapas do ciclo de vida de um componente, a classe do componente deve implementar as interfaces correspondentes:

import { Component, OnInit, OnDestroy } from "@angular/core";
      
@Component({
    selector: "my-app",
    standalone: true,
    template: `<p>Hello Programício</p>`
})
export class AppComponent implements OnInit, OnDestroy {
      
    constructor(){ console.log("constructor"); }
    ngOnInit() { console.log("onInit"); }
    ngOnDestroy() { console.log("onDestroy"); }
}

ngOnInit

O método ngOnInit() é utilizado para uma inicialização mais complexa do componente. Aqui, é possível realizar o carregamento de dados de um servidor ou de outras fontes de dados.

ngOnInit() não é equivalente ao construtor. Embora o construtor possa realizar alguma inicialização do objeto, não é recomendável executar operações complexas nele. O construtor deve ser o mais simples possível e realizar apenas a inicialização básica. Operações mais complexas, como o carregamento de dados de um servidor, que pode demorar, devem ser feitas no método ngOnInit.

ngOnDestroy

O método ngOnDestroy() é chamado antes da remoção do componente. Nele, é possível liberar recursos utilizados que não são removidos automaticamente pelo garbage collector. Aqui, também se pode cancelar assinaturas de eventos do DOM, parar timers, etc.

ngOnChanges

O método ngOnChanges() é chamado antes do método ngOnInit() e sempre que as propriedades vinculadas sofrem alterações. Com o parâmetro SimpleChanges, é possível obter o valor atual e o valor anterior da propriedade alterada. Por exemplo, considere o seguinte componente filho, ChildComponent:

import { Component, Input, OnInit, OnChanges, SimpleChanges } from "@angular/core";
       
@Component({
    selector: "child-comp",
    standalone: true,
    template: `<p>Olá {{name}}</p>`
})
export class ChildComponent implements OnInit, OnChanges { 
    @Input() name: string = "";
  
    constructor() { console.log("constructor"); }
    ngOnInit() { console.log("onInit"); }
      
    ngOnChanges(changes: SimpleChanges) {
      for (let propName in changes) {
        let change = changes[propName];
        let current  = JSON.stringify(change.currentValue);
        let previous = JSON.stringify(change.previousValue);
        console.log(`${propName}: currentValue = ${current}, previousValue = ${previous}`);
      }
    }
}

E suponha que este componente seja utilizado no componente principal AppComponent:

import { Component, OnChanges, SimpleChanges} from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ChildComponent} from "./child.component";
      
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule, ChildComponent],
    template: `<child-comp [name]="name"></child-comp>
                <input type="text" [(ngModel)]="name" />
                <input type="number" [(ngModel)]="age" />`
})
export class AppComponent implements OnChanges { 
    name ="Tom";
    age = 25;
    ngOnChanges(changes: SimpleChanges) {
      for (let propName in changes) {
        let change = changes[propName];
        let current  = JSON.stringify(change.currentValue);
        let previous = JSON.stringify(change.previousValue);
        console.log(`${propName}: currentValue = ${current}, previousValue = ${previous}`);
      }
    }
}

O valor da propriedade name é passado para o componente filho ChildComponent a partir do componente principal, AppComponent. No entanto, o método ngOnChanges() também é implementado no componente principal.

Se executarmos a aplicação, podemos observar que, a cada alteração da propriedade name no componente principal, o método ngOnChanges é chamado:

É importante notar que este método é chamado apenas quando as propriedades de entrada com o decorador @Input são alteradas. Portanto, a alteração da propriedade age no AppComponent não será monitorada aqui. Além disso, o método ngOnChanges() é chamado quando há uma mudança nos inputs que o componente recebe de outro componente.

Implementação de Todos os Métodos

Vamos definir o seguinte componente filho:

import { Component, 
  Input, 
  OnInit,
  DoCheck,
  OnChanges,
  AfterContentInit, 
  AfterContentChecked, 
  AfterViewChecked, 
  AfterViewInit} from "@angular/core";

@Component({
selector: "child-comp",
standalone: true,
template: `<p>Olá {{name}}</p>`
})
export class ChildComponent implements OnInit,
  DoCheck,
  OnChanges,
  AfterContentInit, 
  AfterContentChecked, 
  AfterViewChecked, 
  AfterViewInit  { 
@Input() name: string = "";
count= 1;

ngOnInit() {

this.log(`ngOnInit`);
}
ngOnChanges() {

this.log(`OnChanges`);
}
ngDoCheck() {

this.log(`ngDoCheck`);
}
ngAfterViewInit() {

this.log(`ngAfterViewInit`);
}
ngAfterViewChecked() {

this.log(`ngAfterViewChecked`);
}
ngAfterContentInit() {

this.log(`ngAfterContentInit`);
}
ngAfterContentChecked() {

this.log(`ngAfterContentChecked`);
}

private log(msg: string) {
 console.log(this.count + ". " + msg);
 this.count++;
}
}

E vamos usar este componente no componente principal:

import { Component} from "@angular/core";
  import { FormsModule } from "@angular/forms";
  import { ChildComponent} from "./child.component";
        
  @Component({
      selector: "my-app",
      standalone: true,
      imports: [FormsModule, ChildComponent],
      template: `<child-comp [name]="name"></child-comp>
                  <input type="text" [(ngModel)]="name" />`
  })
  export class AppComponent { 
       name = "Tom";
  }