• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2021, 2022, 2025
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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);
  }