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

====== Angular táblázat ======

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


===== Interfész létrehozása =====

  ng generate interface product

<code javascript product.ts>
export interface Product {
    id: number,
    name: string,
    desc: string,
    price: number
}
</code>

===== Kiválasztott adatai =====

Lista létrehozása, rendelés kiíratása:

<code javascript>

export class ProductListComponent implements OnInit {

  products: Product[] = [
    {"id": 1, "name": "Tej", "desc": "Ovi tej", "price": 2.5},
    {"id": 2, "name": "Kenyér", "desc": "fehér 0.5 kg", "price": 2.1},
    {"id": 3, "name": "Vaj", "desc": "Ovi vaj", "price": 2.9},
  ];


  orderProduct(product: Product ) {
      console.log(product);
  }

}
</code>

Sablon:

<code html>
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    @for(product of productList; track product.id) {
      <tr>
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>{{product.desc}}</td>
        <td>{{product.price}}</td>
        <td>
          <button (click)="orderProduct(product)">
            Rendel
          </button>
        </td>
      </tr>
    }
</table>
</code>