Angular táblázat

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

product.ts

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

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

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

Az interfész változatlan:

product.ts

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

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

//...
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)    
  }
 
}