Az AppComponent osztályban vegyünk fel egy lista tulajdonságot.
items = ['alma', 'körte', 'barack'];
Jelenítsük meg. Ehhez szerkesszük app.component.html fájlt.
<ul> <li *ngFor="let item of items">{{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> <li *ngFor="let item of items">{{item}}</li> </ul>
Az AppComponent osztályban hozzuk létre a hivatkozott addItem() metódust:
addItem(newItem: string) { this.items.push(newItem); }