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:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Vypišme naše pole v cyklu jako seznam:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Vytvořme tlačítko, jehož kliknutím bude volána metoda třídy:
<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:
export 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.
Je dáno pole. Vypište jeho prvky v cyklu. Vytvořte tlačítko, jehož stisknutím bude z pole odstraněn poslední prvek.
