[[oktatas:web:angular|< Angular]]

====== Angular listakezelés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Kezdés  =====

Az AppComponent osztályban vegyünk fel egy lista tulajdonságot.

<code javascript>
items = ['alma', 'körte', 'barack'];
</code>


Jelenítsük meg. Ehhez szerkesszük app.component.html fájlt. 

<code html>

<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>
</code>

===== Elem hozzáadása =====

Készítsünk a sablon fájlban bevitelimezőt és gombot:

<code html>
  <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>
</code>

Az AppComponent osztályban hozzuk létre a hivatkozott addItem() metódust:

<code javascript>
  addItem(newItem: string) {
    this.items.push(newItem);
  }
</code>