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

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

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * 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>

<code html src/app/app.component.html>
<ul>
    @for(fruit of fruitList; track fruit) {
        <li>{{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>
                        <!-- A DOM gyorsabb 
                        renderelése érdekében 
                        adjuk meg az azonosítót,
                        amit it az emp.id-->
    @for(emp of employees; track emp.id) {
        <tr>
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
            <td>{{emp.salary}}</td>
        </tr>    
    }
    </tbody>
</table>
</code>

===== Az index és más változók használata =====

<code javascript>
@for (item of items; rack item.id; let idx = $index) {

}
</code>

Az index párosságának vizsgálata:

<code javascript>
@for (item of items; rack item.id; let idx = $index, e = $even) {

}
</code>

Használható változók:

| $count | Az iterált elemek száma |
| $index | Az aktuális sor index |
| $first | Az első sor |
| $last | Az utolsó sor |
| $even | Páros-e az index |
| $odd | Páratlan-e az index |


===== Régi változat =====

<note important>A régebbi változat használatához importálnunk kell az NgFor modult</note>

<code javascript>
//...
import { NgFor } from '@angular/common';

@Component({
//..
  imports: [NgFor],
//..
})
</code>




==== Gyümölcslista ====


Legyen például egy fruit nevű tömb:

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


<code javascript>
//...
import { NgFor } from '@angular/common';

@Component({
//..
  imports: [NgFor],
//..
})
</code>


Iteráljuk a HTML sablonban:

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


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

<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.