Quais são os ganchos do ciclo de vida do componente Angular?

Question

IT Interview Practice · Accepted Answer

**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.

## Os ganchos principais em ordem

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## A sequência completa

```text
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)
```

## Os três que você usa mais

```ts
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, `@Input`s 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.

## Por que ngOnInit sobre o construtor

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.

## Por que isso importa

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.

Os ganchos principais em ordem

A sequência completa

Os três que você usa mais

Por que ngOnInit sobre o construtor

Por que isso importa

Perguntas relacionadas