Siklus Reaktif di Angular

Reaktivitas juga akan bekerja dalam loop ngFor. Artinya, ketika terjadi perubahan pada array, perubahan tersebut akan langsung terlihat di layar.

Mari kita coba dalam praktik. Misalkan kita memiliki array berikut:

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

Tampilkan array kita dalam loop sebagai daftar:

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

Buat tombol yang ketika diklik akan memanggil method kelas:

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

Dalam method ini, kita akan mengubah array kita secara tertentu, misalnya menambahkan elemen baru ke dalamnya:

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

Sekarang, jika kode dijalankan dan tombol ditekan, maka tepat setelah penekanan, elemen baru akan muncul dalam daftar.