Angular Academy · Aula

Como funciona a detecção de alterações

Entenda o ciclo de detecção de alterações do Angular.

Como funciona a detecção de alterações é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que é detecção de alterações

Detecção de alterações é o processo que o Angular usa para manter o DOM sincronizado com o estado do componente. Quando os dados mudam, o Angular reavalia as associações e atualiza somente o que for diferente.

O ciclo de detecção

O Angular percorre a árvore de componentes da raiz para baixo, verificando as associações de cada componente. Essa passagem de cima para baixo é um ciclo de detecção de alterações (tick).

O que dispara um tick

Por padrão, o Angular executa a detecção de alterações após eventos assíncronos: eventos do DOM, temporizadores e respostas HTTP. Isso é coordenado pelo Zone.js.

Zone.js

Zone.js aplica patches às APIs assíncronas (setTimeout, addEventListener, Promise, XHR) para que o Angular saiba quando uma delas termina e quando pode ser necessário um tick.

// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.

NgZone

NgZone encapsula o Zone.js para o Angular. Você pode executar código fora da zona do Angular para evitar disparar a detecção de alterações em laços de alta frequência.

private zone = inject(NgZone);

this.zone.runOutsideAngular(() => {
  // heavy work, no CD triggered
});

Reentrando na zona

Para atualizar a interface a partir de fora da zona, entre novamente nela com run para que o Angular agende um tick.

this.zone.run(() => {
  this.ready = true;
});

Estratégia padrão

Com a estratégia padrão, todos os componentes são verificados a cada tick. Isso é simples e seguro, mas pode ser ineficiente em árvores grandes.

Comparação de associações

O Angular compara o valor atual de cada associação com o valor anterior usando Object.is. Se não houver alteração, o DOM não será tocado.

As expressões devem ser puras

As expressões do modelo são executadas em cada verificação, portanto devem ser rápidas e não produzir efeitos colaterais. Evite chamar funções dispendiosas diretamente nos modelos.

<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>

ExpressionChangedAfterChecked

No modo de desenvolvimento, o Angular executa uma segunda passagem de verificação. Se um valor mudar entre as passagens, você receberá ExpressionChangedAfterItHasBeenCheckedError, indicando que o estado foi alterado durante a renderização.

Controle manual

Injete ChangeDetectorRef para controlar a detecção: markForCheck(), detectChanges() e detach() oferecem um controle detalhado.

private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();

Verificação rápida

Teste sua compreensão da detecção de alterações.

Recapitulação

Você aprendeu que a detecção de alterações é uma passagem de cima para baixo pela árvore que sincroniza o estado com o DOM, acionada por eventos assíncronos por meio de Zone.js/NgZone, comparando as associações com Object.is. ChangeDetectorRef oferece controle manual.

Perguntas Frequentes

A aula “Como funciona a detecção de alterações” é grátis?

Sim — o texto completo de “Como funciona a detecção de alterações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Como funciona a detecção de alterações”?

Entenda o ciclo de detecção de alterações do Angular. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Como funciona a detecção de alterações”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy