Angular táblázat

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

ng generate interface product

product.ts

export interface Product {
    id: number,
    name: string,
    desc: string,
    price: number
}

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

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

Sablon:

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