Ciklet Reaktive në Angular

Reaktiviteti do të funksionojë gjithashtu në ciklin ngFor. Kjo do të thotë se kur ndryshohet array, këto ndryshime do të shfaqen menjëherë në ekran.

Le ta provojmë në praktikë. Le të themi se kemi array-n e mëposhtëm:

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

Le të shfaqim array-n tonë në një cikël si një listë:

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

Le të krijojmë një buton, upon clicking on which do të thirret një metodë e klasës:

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

Në këtë metodë, le të ndryshojmë array-n tonë në një farë mënyre, për shembull, duke shtuar një element të ri në të:

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

Tani, nëse e ekzekutoni kodin dhe klikoni në buton, menjëherë pas klikimit në listë do të shfaqet një element i ri.