Egy komponensben vegyünk fel egy lista adattagot.
items = ['alma', 'körte', 'barack'];
Jelenítsük meg. Ehhez szerkesszük app.component.html fájlt.
<ul> @for(item of items; track item) { <li>{{item}}</li> } </ul>
Készítsünk a sablon fájlban bevitelimezőt és gombot:
<label for="item-input">Új elem</label> <input id="item-input" #newItem> <button (click)="addItem(newItem.value)"> Hozzáadás </button> <ul> @for(item of items; track item) { <li>{{item}}</li> } </ul>
Az AppComponent osztályban hozzuk létre a hivatkozott addItem() metódust:
addItem(newItem: string) { this.items.push(newItem); }