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

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

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


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

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

<code html>
<div class="container-sm container-md">
<h2>Termékek</h2>

    <div *ngFor="let product of products">
        <div class="p-1 bg-light">
            <h3 class="text-primary">{{ product.name }}</h3>
            <div>
                {{ product.desc }}
            </div>
            <div>
                {{ product.price }} SW
            </div>
            <button class="btn btn-info"
            (click)="add_product(product)">
                Rendel
            </button>
        </div>
    </div>

</div>
</code>

<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},
  ];

  constructor() { }

  ngOnInit(): void {
  }

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

}
</code>


===== Data attribútum =====
Az interfész változatlan:
<code javascript product.ts>
export interface Product {
    "id": number,
    "name": string,
    "desc": string,
    "price": number
}
</code>

<code html5>
<div class="container-sm container-md">
<h2>Termékek</h2>

    <div *ngFor="let product of products">
        <div class="p-1 bg-light">
            <h3 class="text-primary">{{ product.name }}</h3>
            <div>
                {{ product.desc }}
            </div>
            <div>
                {{ product.price }} SW
            </div>
            <button class="btn btn-info"
            (click)="add_product($event)"
            attr.data-id="{{ product.id }}"            
            attr.data-name="{{ product.name }}"
            attr.data-desc="{{ product.desc }}"
            attr.data-price="{{ product.price }}"
            >
                Rendel
            </button>
        </div>
    </div>

</div>
</code>


<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},
  ];

  constructor() { }

  ngOnInit(): void {
  }

  add_product($event: any) {
    console.log($event.target.dataset.id)    
  }

}

</code>