Angular'da Reaktif Döngüler

Reaktivite, ngFor döngüsünde de çalışacaktır. Bu, dizide değişiklikler olduğunda, bu değişikliklerin hemen ekranda görüneceği anlamına gelir.

Pratikte deneyelim. Aşağıdaki diziye sahip olduğumuzu varsayalım:

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

Dizimizi bir döngüde liste olarak çıktılayalım:

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

Tıklandığında bir sınıf metodunu çağıracak bir düğme yapalım:

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

Bu metotta dizimizi bir şekilde değiştirelim, örneğin, içine yeni bir eleman ekleyelim:

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

Şimdi, kodu başlatıp düğmeye basarsak, basıldıktan hemen sonra listede yeni bir eleman görünecektir.