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

====== Angular iteráció ======

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

===== Iteráció =====

A TypeScript fájlban létrehozott listákat, tömböket iterálhatjuk 
a HTML sablonban.

===== Lista iterálása =====

<code javascript src/app/app.component.ts>
  fruitList = [
    "alma",
    "körte",
    "barack",
    "szilva"
  ]
</code>


Iteráljuk a HTML sablonban:

<code html src/app/app.component.html>
<ul>
    <li *ngFor="let fruit of fruits">
        {{fruit}}
    </li>
</ul>
</code>

===== Objektumlista iterálása =====

Legyen egy lista:

<code javascript src/app/app.component.ts>
  employees = [
    {id: 1, name: "Béla", city: "Szeged", salary: 392 },
    {id: 2, name: "Dénes", city: "Szolnok", salary: 395 },
    {id: 3, name: "Imre", city: "Szeged", salary: 397 },
  ]
</code>

Lista iterálása sablonban:

<code html src/app/app.component.html>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Név</th>
            <th>Település</th>
            <th>Fieztés</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of employees">
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
            <td>{{emp.salary}}</td>
        </tr>    
    </tbody>
</table>
</code>













===== Objektumlista iterálása p elemben =====

<code html>
<p *ngFor="let task of tasks">{{ task.id }} {{ task.name }}</p>
</code>


==== Teljes példa ====

Ebben a példában dolgozókat szeretnénk listázni. Erre a célra létrehoztunk egy külön 
komponenst **first** néven.

Külön komponens esetén a 17-s Angulartól importálni kell a CommondModule modult.

<code javascript src/app/first/first.component.ts>
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-first',
  standalone: true,
  imports: [CommonModule],  
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  employees!: Employee[];
  constructor() { }

  ngOnInit(): void {
    this.employees = [
      { name: "Parke Béla", salary: 2850000 },
      { name: "Lenke Attila", salary: 2243500 },
      { name: "Tron Ferenc", salary: 2150500 }
    ]
  }

}

interface Employee {
  name: string,
  salary: number
}
</code>


<code javascript src/app/first/first.component.html>

<ul>
    <li *ngFor="let employee of employees">
        {{employee.name}} {{employee.salary}}
    </li>
</ul>
</code>

Az alábbi sorban, tettünk egy felkiáltójelet:
  employees!: Employee[];
Erre azért van szükség, hogy mert nem a konstruktorban inicializáljuk az objektumot,
és fordítónak ezzel alapból problémája van.


==== Kiválasztással ====

Ez a példa megegyezik az előzővel, de hozzáadtunk egy kiválasztási lehetőséget. 
Bármelyik névre kattintunk, az megjelenik a lista alatt a "Kiválasztott" szöveg
után.


<code javascript src/app/first/first.component.ts>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  employees!: Employee[];
  selected!: string;
  constructor() { }

  ngOnInit(): void {
    this.employees = [
      { name: "Parke Béla", salary: 2850000 },
      { name: "Lenke Attila", salary: 2243500 },
      { name: "Tron Ferenc", salary: 2150500 }
    ]
  }

  onClickEmployee(employee: Employee) {
    this.selected = employee.name;
  }

}

interface Employee {
  name: string,
  salary: number
}
</code>

<code javascript src/app/first/first.component.html>

<ul>
    <li *ngFor="let employee of employees" 
    (click)="onClickEmployee(employee)">
        {{employee.name}} {{employee.salary}}
    </li>
</ul>

<p>Kiválasztott: {{selected}}</p>
</code>


==== Függvényhívás egy elemen ====


<code javascript>
<tr *ngFor="let emp of employees">
    <td>{{emp.name}}}</td>
    <td>{{valamiAtalakitoFuggveny(emp.city)}}</td>
</tr>
</code>

A valamiAtalakitoFuggveny() csinál valamit a településsel majd visszaad valamit és
az az érték kerül renderelésre.