Bucle Reactive în Angular

Reactivitatea va funcționa și într-un buclă ngFor. Aceasta înseamnă că, la modificările vectorului, aceste modificări se vor reflecta imediat pe ecran.

Să încercăm în practică. Să presupunem că avem următorul vector:

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

Să afișăm vectorul nostru într-un buclă sub formă de listă:

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

Să creăm un buton, la click pe care se va apela o metodă a clasei:

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

În această metodă, vom modifica cumva vectorul nostru, de exemplu, vom adăuga un nou element în el:

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

Acum, dacă rulăm codul și apăsăm pe buton, imediat după apăsare în listă va apărea un nou element.