Reaktivní cykly v Angular

Reaktivita bude fungovat také v cyklu ngFor. To znamená, že při změnách pole se tyto změny okamžitě projeví na obrazovce.

Pojďme to vyzkoušet v praxi. Předpokládejme, že máme následující pole:

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

Vypišme naše pole v cyklu jako seznam:

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

Vytvořme tlačítko, jehož kliknutím bude volána metoda třídy:

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

V této metodě nějak změníme naše pole, například do něj přidáme nový prvek:

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

Nyní, pokud kód spustíme a stiskneme tlačítko, ihned po stisknutí se v seznamu objeví nový prvek.