Reaktīvie cikli Angular

Reaktivitāte darbosies arī ciklā ngFor. Tas nozīmē, ka, mainoties masīvam, šīs izmaiņas uzreiz atspoguļosies ekrānā.

Izmēģināsim to praksē. Pieņemsim, ka mums ir šāds masīvs:

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

Attēlosim mūsu masīvu ciklā saraksta veidā:

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

Izveidosim pogu, uz kuras noklikšķinot tiks izsaukta klases metode:

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

Šajā metodē kaut kā mainīsim mūsu masīvu, piemēram, pievienosim tam jaunu elementu:

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

Tagad, ja palaidīsim kodu un nospiedīsim uz pogas, tad uzreiz pēc nospiešanas sarakstā parādīsies jauns elements.