Angular listakezelés

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

Kezdés

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>

Elem hozzáadása

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