Aula 11

No Angular, cada componente ou diretiva segue um ciclo de vida definido. Esse ciclo representa as etapas pelas quais o componente passa desde sua criação até sua destruição.

Principais Lifecycle Hooks

• constructor() – Chamado quando a classe do componente é instanciada. Normalmente, não se usa lógica pesada aqui.
• ngOnChanges() – Executado sempre que uma propriedade com @Input() muda. Recebe um objeto SimpleChanges com os valores anteriores e atuais.
• ngOnInit() – Chamado uma vez, logo após o Angular configurar as propriedades vinculadas a dados. Ideal para inicializações.
• ngDoCheck() – Executado a cada verificação de mudança (change detection). Pode ser usado para lógica personalizada de detecção de mudanças.
• ngAfterContentInit() – Chamado depois que o conteúdo projetado com <ng-content> foi inserido no componente.
• ngAfterContentChecked() – Chamado após cada verificação do conteúdo projetado.
• ngAfterViewInit() – Chamado depois que a view (template e filhos) do componente foi inicializada. Ideal para manipulação de elementos com @ViewChild.
• ngAfterViewChecked() – Chamado após cada verificação da view.
• ngOnDestroy() – Chamado antes do Angular destruir o componente. É aqui que você limpa timers, observables, subscrições, etc.

Exemplo 1

Veja abaixo um exemplo de uso básico dos hooks:

    
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-exemplo',
  template: '
Componente carregado!
'
})
export class ExemploComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Componente inicializado');
  }

  ngOnDestroy() {
    console.log('Componente será destruído');
  }
}