oktatas:web:angular:angular_listakezeles
Tartalomjegyzék
Angular listakezelés
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2021, 2022, 2025
- Web: https://szit.hu
Kezdés
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>
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> @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); }
oktatas/web/angular/angular_listakezeles.txt · Utolsó módosítás: 2025/03/02 13:50 szerkesztette: admin