Ganchos do ciclo de vida são métodos que Angular chama em momentos específicos na vida de um componente — criação, mudanças de entrada, renderização e destruição. Você os implementa adicionando métodos de interface à sua classe de componente.
{ , , , , } ;
({ ... })
, , {
() {
}
() {
}
() {
}
}
constructor → DI happens; inputs NOT yet available
ngOnChanges → when @Input values are set/changed
ngOnInit → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck → every change detection run (custom change detection)
ngAfterContentInit → projected content (<ng-content>) initialized
ngAfterViewInit → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked → after each view check
ngOnDestroy → before removal ★ (unsubscribe, clear timers)
ngOnInit() {
this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
this.subscription.unsubscribe(); // prevent memory leaks!
clearInterval(this.timer);
}
ngOnInit — o lugar padrão para inicialização e busca de dados (diferentemente do construtor, @Inputs estão disponíveis aqui).ngAfterViewInit — quando as visualizações filhas e as referências @ViewChild existem.ngOnDestroy — limpeza: desinscreva-se de Observables, limpe cronômetros, remova ouvintes.O construtor deve fazer apenas DI; as entradas ainda não estão vinculadas lá. ngOnInit é executado depois que Angular configurou o componente e suas entradas — o lugar correto para a lógica de inicialização.
Os ganchos do ciclo de vida permitem que você execute a lógica no momento certo — inicialize em ngOnInit, acesse a visualização renderizada em ngAfterViewInit e, crucialmente, limpe em ngOnDestroy (desinscrever-se de Observables é a maneira #1 de evitar vazamentos de memória em Angular).
Conhecer a sequência e o papel de cada gancho é essencial para busca de dados correta, acesso ao DOM e gerenciamento de recursos.