Reaktivni ciklusi u Angularu

Reaktivnost će takođe raditi u ciklusu ngFor. Ovo znači da će se promene u nizu odmah prikazati na ekranu.

Hajde da isprobamo u praksi. Neka imamo sledeći niz:

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

Ispisaćemo naš niz u ciklusu kao listu:

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

Napravićemo dugme, čijim klikom će se pozivati metoda klase:

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

U ovoj metodi ćemo nekako izmeniti naš niz, na primer, dodati mu novi element:

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

Sada, ako pokrenemo kod i pritisnemo dugme, onda će se odmah nakon klika u listi pojaviti novi element.