Change Detection

Hello World 😁 💻

No artigo de hoje iremos falar sobre o Change Detection: o mecanismo do Angular responsável por sincronizar o estado da aplicação (os dados no seu componente) com o que é exibido na tela (o DOM).

Como funciona o Change Detection

O Angular funciona em um ciclo muito simples:

Algum dado muda → o Angular percebe essa mudança → atualiza a tela.

Sempre que algo pode ter mudado (clique, requisição HTTP, timer, etc.), o Angular percorre a árvore de componentes verificando se as propriedades usadas nos templates mudaram. Se mudaram, ele atualiza o DOM automaticamente. Você não precisa manipular o DOM manualmente.

Esse processo de perceber que algum dado mudou e decidir o que precisa ser redesenhado na interface é chamado de Change Detection.

Um exemplo

Imagine este componente:

typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-change-detection',
  imports: [],
  templateUrl: './change-detection.html',
  styleUrl: './change-detection.css',
})
export class ChangeDetection {
  
  contador = 0;

  aumentar() {
    this.contador++;
  }
}

Código em Typescript

E o HTML:

html
<div class="container">
    <p>{{ contador }}</p>

    <button (click)="aumentar()">
        Aumentar
    </button>
</div>

Código em HTML

E no CSS para estilizar:

css
.container {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 4rem;
    width: 400px;
    height: 200px;
    align-items: center;
    background-color: #d6cd91;
    border-radius: 5px;

}

button {
    padding: 6px 8px;
    font-size: 1rem;
    border-radius: 5px;
    background-color: #9c3e3e;
    border: 1px solid #ccc;
    color: #fff;
    transition:  0.3s ease;
    cursor: pointer;
}

button:hover {
    background-color: #b94e4e;
}

Código em CSS

Quando você clica no botão:

  1. Contador passa de 0 para 1;
  2. O Angular detecta que houve uma mudança;
  3. Ele atualiza o {{ contador }};
  4. A tela mostra 1.

Resultado do código no navegador

Você nunca precisou fazer algo como:

html
document.querySelector("p").innerText = contador;

O Angular fez isso automaticamente graças ao Change Detection.

Como ele sabe que algo mudou?

O Angular dispara a detecção quando acontecem eventos como:

  • Clique em botão;
  • Digitação em um input;
  • Resposta de uma requisição HTTP;
  • SetTimeout();
  • Promise;
  • Atualização de um Signal (Angular moderno).

Depois disso, ele verifica os componentes para descobrir quais valores mudaram e atualiza apenas o necessário. Imagine a árvore de componentes:

App
├── Header
├── Menu
├── Produtos
│   ├── Produto 1
│   ├── Produto 2
│   └── Produto 3
└── Footer

Se um produto mudar de preço, o Angular faz uma verificação para descobrir quais partes precisam ser atualizadas. Dependendo da estratégia de detecção utilizada, ele pode verificar mais ou menos componentes.

Zone.js x Signals

Para o Change Detection funcionar, ele precisa responder a uma pergunta fundamental: "Como eu sei O QUE mudou e QUANDO mudou?"

É aqui que entram o Zone.js e os Signals como estratégias / ferramentas para resolver essa questão.

Zone.js (A abordagem "Alarme Geral")

O Zone.js monitora o navegador. Sempre que qualquer evento assíncrono acontece (clique, tempo esgotado, resposta de API), ele toca o alarme para o Angular: "Ei, algo assíncrono aconteceu! Execute o Change Detection!"

Como o Zone.js só sabe que algo aconteceu (mas não exatamente onde ou o quê), o mecanismo de Change Detection faz uma varredura geral verificando componente por componente.

Signals (A abordagem "GPS Direcionado")

O Signal é uma variável inteligente que sabe exatamente quem está lendo o valor dela no HTML.

Em vez de varrer a casa inteira procurando o que mudou, o Signal avisa o Change Detection com uma maior precisão: "O valor X mudou, atualize apenas aquele <span> específico no componente Y".

Exemplo ilustrativo Zone.JS x Signals

Para entender melhor a diferença do Zone.js x Signals, vamos usar a seguinte analogia:

Imagine um prédio com 100 apartamentos. O porteiro recebe uma ligação: "Acho que aconteceu alguma coisa." Então ele sai batendo de porta em porta (Zone.JS):

Apartamento 1?

Apartamento 2?

Apartamento 3?

...

Mesmo que só o apartamento 83 tivesse mudado. Agora (Signals), o sistema inteligente informa: "O apartamento 83 mudou." O porteiro vai direto lá. Não perde tempo verificando os outros 99 apartamentos.

Default vs. OnPush

Se o Change Detection é o mecanismo, e o Zone.js/Signals são as ferramentas de notificação, Default e OnPush são os modos de operação que você escolhe para ajustar como essa varredura deve se comportar.

Default

É o padrão. Sempre que acontece um evento, o Angular verifica o componente e seus filhos.

É simples e funciona muito bem na maioria dos projetos.

typescript
@Component({
  changeDetection: ChangeDetectionStrategy.Default
})

OnPush

É uma estratégia mais otimizada. O Angular só verifica o componente quando, por exemplo:

  • Um @Input() recebe uma nova referência;
  • Ocorre um evento dentro do componente;
  • Um Signal muda;
  • Você solicita a atualização manualmente.

typescript
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})

Ela pode melhorar o desempenho em aplicações grandes, mas exige entender melhor quando o Angular executa a detecção. Nas versões recentes , o Angular passou a usar bastante os Signals. Com Signals, o framework sabe exatamente qual valor mudou. Exemplo:

typescript
contador = signal(0);
contador.update(valor => valor + 1);

Quando esse signal muda, o Angular já sabe quais partes da interface dependem dele e atualiza somente essas partes, tornando a detecção mais eficiente.

E por que existe o Angular "Zoneless"?

Porque o Angular moderno percebeu que nem sempre precisava de alguém dizendo: "Confere tudo de novo!".

Com Signals, por exemplo, o próprio Angular sabe exatamente quando um dado mudou.

Em vez de:

Zone.js
    ↓
Change Detection

fica algo mais próximo de:

Signal mudou
      ↓
Angular já sabe quem depende dele
      ↓
Atualiza apenas o necessário

Ou seja, o Angular não precisa mais da "campainha" do Zone.js para muitos casos. O framework está caminhando para um modelo em que ele seja cada vez mais previsível, eficiente , granular e menos dependente do Zone.js.

Isso também facilita o raciocínio do desenvolvedor, porque a atualização deixa de depender de uma "mágica" baseada em eventos globais e passa a depender de dependências explícitas entre dados e interface.

O Angular está saindo de um modelo de "verificar se algo mudou" para um modelo de "eu já sei exatamente o que mudou e quem depende disso". Esse é um dos maiores avanços das versões recentes com Signals e do suporte ao modo zoneless.

Uma pequena observação técnica

Em documentações ou vídeos mais recentes, pode-se ouvir frases como "Signals eliminam a necessidade de Change Detection". Isso é uma simplificação. O que eles realmente eliminam é a necessidade do modelo amplo de verificação acionado pelo Zone.js em muitos casos.

No fim das contas, o Angular ainda precisa reconciliar o estado da aplicação com o DOM. Esse processo continua sendo, em essência, uma forma de change detection , só que muito mais precisa e eficiente.

Conclusão

O Change Detection é o motor fundamental do Angular para manter o estado da aplicação e a interface do usuário em perfeita sintonia. Embora seu objetivo principal (atualizar o DOM quando os dados mudam) permaneça o mesmo, a forma de executá-lo evoluiu significativamente: enquanto o modelo tradicional dependia do Zone.js para disparar varreduras globais, o ecossistema moderno com Signals e a estratégia OnPush, permite uma reatividade mais direcionada, otimizando a performance e reduzindo o consumo de recursos.

Compreender esse mecanismo e a separação clara entre os gatilhos de notificação e o algoritmo de verificação é essencial para construir aplicações Angular escaláveis, performáticas e de fácil manutenção.

Se você chegou até aqui, espero que tenha gostado do artigo.

Obrigada pela atenção e até breve.😁

Laryssa Ramos

Voltar para os artigos