Angular Academy · Aula

ngOnChanges e alterações de entrada

Reaja a alterações nas propriedades de entrada.

Aula 2 de 413 etapas

ngOnChanges e alterações de entrada é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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.

Reagindo a alterações nas entradas

O gancho OnChanges permite que um componente reaja sempre que suas propriedades @Input mudarem. O Angular chama ngOnChanges antes de ngOnInit e a cada atualização de entrada.

Implementando OnChanges

Implemente a interface OnChanges e adicione um método ngOnChanges que receba um objeto SimpleChanges.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

O objeto SimpleChanges

SimpleChanges é um mapa indexado pelo nome da entrada. Cada item é um SimpleChange com currentValue, previousValue e firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Detectando a primeira alteração

O sinalizador firstChange é verdadeiro na primeira vez que uma entrada é definida. Use-o para distinguir a inicialização de atualizações posteriores.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Reagindo a uma entrada específica

Sempre verifique se a chave existe antes de lê-la, pois nem todas as entradas mudam em todos os ciclos.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Detecção baseada em referência

ngOnChanges é executado quando há alterações de referência em objetos e arrays. Alterar um objeto passado como entrada NÃO o acionará.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Ordem com ngOnInit

Na criação, ngOnChanges é executado primeiro, com as entradas iniciais, e depois ngOnInit. Após isso, ngOnChanges é executado novamente sempre que as entradas mudam.

Comparando valores antigos e novos

Um uso comum é reagir apenas quando um valor realmente diferir, por exemplo, recarregar dados quando uma entrada de identificador mudar.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Tipagem para maior segurança

Você pode ler valores de changes ou diretamente da propriedade do componente; depois de ngOnChanges, a propriedade já contém o valor atual.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Quando não usar OnChanges

Para um estado derivado de uma única entrada, um getter ou valor calculado pode ser mais claro. Reserve ngOnChanges para efeitos colaterais que precisam ser executados nas atualizações das entradas.

Várias entradas de uma vez

Se várias entradas mudarem no mesmo ciclo, ngOnChanges será chamado uma vez, com todas elas presentes no mapa SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Verificação rápida

Teste sua compreensão sobre OnChanges.

Responda na aula interativa

Recapitulação

O gancho OnChanges reage às alterações das entradas por meio de um mapa SimpleChanges com currentValue, previousValue e firstChange. Ele é acionado por alterações de referência; por isso, use atualizações imutáveis.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 38
Aulas: 144

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “ngOnChanges e alterações de entrada” é grátis?

Sim — o texto completo de “ngOnChanges e alterações de entrada” é 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 “ngOnChanges e alterações de entrada”?

Reaja a alterações nas propriedades de entrada. 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 2 de 4.

Quanto tempo leva a aula “ngOnChanges e alterações de entrada”?

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