Angularda Reaktiv Tsikllar

Reaktivlik tsikl ngFor ichida ham ishlaydi. Bu shuni anglatadiki, massiv o'zgarganda, bu o'zgarishlar darhol ekranda aks etadi.

Keling, amalda sinab ko'raylik. Faraz qilaylik, bizda quyidagi massiv mavjud:

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

Keling, massivimizni tsiklda ro'yxat shaklida chiqaraylik:

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

Keling, bosilganda klass metodini chaqiradigan tugma yarataylik:

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

Ushbu metodda massivimizni o'zgartiramiz, masalan, unga yangi element qo'shamiz:

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

Endi, agar kodni ishga tushirsak va tugmani bossek, bosish bilan birgalikda ro'yxatda yangi element paydo bo'ladi.