Angular-da reaktiw sikller

Reaktiwlik siklde ngFor hem işler. Bu bolsa, massiwda üýtgeşiklikler bolanda, bu üýtgeşiklikler ekrana derrew ýansyar.

Geliň amaly işde synap göreli. Bizde aşakdaky massiw bar bolsun:

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

Massiwymyzy siklde sanaw görnüşinde çykaralyň:

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

Bir düwme dörediň, oňa basylanynda klas metodynyň çagyrylmagyny üpjün ediň:

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

Bu metodda massiwimizi birneme üýtgedeliň, mysal üçin, oňa täze element goşalyň:

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

Indi kody işledip we düwmä bassaňyz, basylyşyňyzdan soň sanawda derrew täze element peýda bolar.