Search code examples
arraysangulareventsmouseeventpush

Angular 2: Push into array upon clicking an object

When I click a row of object, I want it to be pushed into the selectedProducts array.

I have this in my typescript 

selectedProducts: Product[] = [];

select(prod) {
    this.selectedProducts.push(prod);
    console.log(this.selectedProducts);   
}

but it only gets the first object I click in the user's side

Below is my HTML

<div class="list-content fluid">
    <div class="products-cards" *ngFor="let product of dataSource['docs']">
        <app-product-card [product]="product" (click)="select(product)"></app-product-card>
    </div>
</div>

Solution

  • I suggest to try this :

    <div class="list-content fluid">
    <div class="products-cards" *ngFor="let product of dataSource['docs']"  (click)="select(product)">
        <app-product-card [product]="product"></app-product-card>
    </div>
</div>