Resolver Erro ExpressionChangedAfterItHasBeenCheckedError no Angular

Neste artigo você vai aprender a como resolver o erro ExpressionChangedAfterItHasBeenCheckedError, um problema comum em projetos Angular

Fala programador(a), beleza? Bora aprender mais sobre Angular e seus erros!

O desenvolvimento com Angular é repleto de oportunidades de aprendizado, principalmente quando encontramos erros e desafios.

Um dos erros mais comuns, mas muitas vezes mal compreendido, é o ExpressionChangedAfterItHasBeenCheckedError.

Para quem já o encontrou, sabe que pode ser um pouco intimidador à primeira vista.

Mas não se preocupe! Vamos desvendar este erro, entender suas causas e aprender a resolvê-lo.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

O que é o “ExpressionChangedAfterItHasBeenCheckedError”?

Este erro ocorre quando o valor de uma propriedade de um componente é alterado após a verificação do ciclo de vida do Angular.

Simplificando, é como se você estivesse dizendo ao Angular: “Aqui está o valor que quero que você use”, e depois, antes que o Angular pudesse terminar seu trabalho, você dissesse: “Espere, mudei de ideia, use este valor em vez disso”.

Por que o Angular se preocupa com isso?

A detecção de mudanças no Angular é o processo pelo qual o framework verifica se algum valor de propriedade do componente foi alterado.

Se tiver mudado, o Angular atualizará a DOM para refletir essa mudança.

O erro “ExpressionChangedAfterItHasBeenCheckedError” é o mecanismo do Angular para nos dizer que algo não está certo no processo de detecção de mudanças e precisa ser corrigido.

Cenários comuns que levam ao erro

Atualização de propriedades durante o ciclo de vida

Um dos cenários mais comuns que levam a esse erro é quando atualizamos uma propriedade de um componente durante um de seus hooks de ciclo de vida, como ngOnInit ou ngAfterViewInit.

ngAfterViewInit() {
    this.minhaPropriedade = 'Novo valor';
}

Neste exemplo, minhaPropriedade está sendo atualizada após a view do componente ter sido inicializada, o que não é permitido pelo Angular.

Atualização de valores de controle de formulário

Outro cenário comum é quando estamos usando o ReactiveFormsModule e tentamos atualizar um FormControl depois que ele já foi verificado.

this.meuFormulario = this.fb.group({
    campo: ['']
});

ngAfterViewInit() {
    this.meuFormulario.get('campo').setValue('Novo valor');
}

Neste caso, estamos atualizando o valor de um controle de formulário após a view ter sido inicializada.

Como resolver o erro

Agora que compreendemos as causas desse erro, vamos explorar algumas soluções.

Mova a atualização de propriedades para o hook correto

Se você estiver atualizando uma propriedade no hook ngAfterViewInit, tente movê-la para o ngOnInit:

ngOnInit() {
    this.minhaPropriedade = 'Novo valor';
}

Use o ChangeDetectorRef

O Angular fornece uma ferramenta chamada ChangeDetectorRef, que nos permite controlar manualmente a detecção de mudanças.

Para resolver nosso erro, podemos forçar uma nova verificação após fazer nossas atualizações:

constructor(private cdRef: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.minhaPropriedade = 'Novo valor';
    this.cdRef.detectChanges();
}

Atualize os valores de forma assíncrona

Outra abordagem é atualizar os valores de forma assíncrona, usando o setTimeout:

ngAfterViewInit() {
    setTimeout(() => {
        this.minhaPropriedade = 'Novo valor';
    });
}

Isso garante que a atualização ocorra em um novo ciclo de detecção de mudanças, evitando o erro.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

O erro “ExpressionChangedAfterItHasBeenCheckedError” pode ser intimidador, mas, com uma compreensão clara do problema e das soluções disponíveis, ele se torna gerenciável.

Lembre-se de que o Angular nos mostra esse erro como uma forma de nos ajudar a escrever código mais previsível e estável.

Ao seguir as dicas e técnicas acima, você estará bem preparado para lidar com esse erro e desenvolver aplicações Angular robustas e eficientes.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.