Ciclos Reativos no Angular

A reatividade também funcionará em um loop ngFor. Isso significa que quando o array for alterado, as mudanças serão refletidas imediatamente na tela.

Vamos testar na prática. Suponha que temos o seguinte array:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

Vamos exibir nosso array em um loop como uma lista:

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

Vamos criar um botão que, ao ser clicado, chamará um método da classe:

app/app.component.html<button (click)="add()">
  add
</button>

Neste método, vamos modificar nosso array de alguma forma, por exemplo, adicionando um novo elemento:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

Agora, se executarmos o código e clicarmos no botão, um novo elemento aparecerá imediatamente na lista após o clique.