No Angular, temos uma série de hooks (métodos) que podem ser acionados em diferentes pontos do ciclo de vida de um componente. Só pelo nome já dá para sacar o que cada um faz, mas o mais importante é entender o contexto em que esses hooks são chamados.
Hooks do Ciclo de Vida em Ordem de Invocação:
constructor: Não é exatamente um hook, mas é chamado durante o ciclo de vida do componente.
ngOnChanges: Chamado quando o Angular define ou redefine as propriedades de entrada (input properties) vinculadas a dados.
ngOnInit: Invocado depois que as propriedades vinculadas a dados de uma diretiva são inicializadas.
ngDoCheck: Permite que você implemente suas próprias verificações de mudança para qualquer coisa que o Angular não detecte por conta própria. Esse hook é chamado toda hora, então qualquer operação dentro dele precisa ser rápida e eficiente para não travar tudo.
ngAfterContentInit: Chamado depois que o Angular finaliza a primeira verificação de conteúdo e projeta o conteúdo externo na view do componente.
ngAfterContentChecked: Chamado depois que o Angular verifica o conteúdo projetado no componente.
ngAfterViewInit: Invocado quando as views do componente e suas views filhas foram totalmente inicializadas.
ngAfterViewChecked: Chamado depois que o Angular realiza a detecção de mudanças na view de um componente e nas views filhas.
ngOnDestroy: Chamado logo antes do Angular destruir o componente. Aqui é onde você faz a faxina, desconectando conexões, cancelando inscrições de observables, e tirando event listeners para não deixar vazamentos de memória rolando por aí.
Exemplos de um arquivo TypeScript com esses hooks:
Aqui está o nosso arquivo de exemplo com os hooks. Estou usando o Angular 18, então não preciso mais importar os hooks ou implementar interfaces como OnInit. Mas, se você estiver usando uma versão anterior, talvez tenha que fazer esses passos adicionais.
`import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hook',
standalone: true,
imports: [],
templateUrl: './hook.component.html',
styleUrl: './hook.component.css'
})
export class HookComponent {
@Input('title') titleString: string = '';
constructor(){
console.log('constructor foi chamado');
}
ngOnChanges(){
console.log('ngOnChanges foi chamado');
}
ngOnInit(){
console.log('ngOnInit foi chamado');
}
ngDoCheck(){
console.log('ngDoCheck foi chamado');
}
ngAfterContentInit(){
console.log('ngAfterContentInit foi chamado');
}
ngAfterContentChecked(){
console.log('ngAfterContentChecked foi chamado');
}
ngAfterViewInit(){
console.log('ngAfterViewInit foi chamado');
}
ngAfterViewChecked(){
console.log('ngAfterViewChecked foi chamado');
}
ngOnDestroy(){
console.log('ngOnDestroy foi chamado');
}
}`
O Que Acontece na Prática:
Esses hooks são chamados depois que o componente é inicializado. Todos os hooks são chamados durante a inicialização, exceto o ngOnDestroy, porque, claro, ele só rola na destruição. Hooks como ngOnInit, ngAfterContentInit e ngAfterViewInit são chamados uma única vez no ciclo de vida do componente.
O ngOnDestroy, como o nome já entrega, só aparece na hora da destruição do componente. Então, quando ele entra em cena, o componente já está de malas prontas pra partir.
Agora, os hooks como ngOnChanges, ngDoCheck, ngAfterContentChecked, e ngAfterViewChecked são acionados toda vez que rola uma mudança no estado (tipo quando o valor de uma variável de entrada muda).
Dica de Ouro:
No dia a dia, os hooks que você vai acabar usando mais são ngOnInit (esse é o arroz com feijão), ngOnChanges, ngOnDestroy, e ngAfterViewInit. Se você tem algum jeito interessante de usar os outros hooks, manda aí! E aí está, agora você tem o “hook up”. Valeu!
Top comments (0)