CODEWITHSUNDEEP
angularionic-frameworkionic3
Sahil
Sahil

Reputation: 69

How to display a seprate event on a button click in *ngfor item?

Trying to display a result on button click for a particular item in an *ngFor. It should display the result under the clicked item only. Original Image How to display result in particular card which is clicked?

home.html


    <ion-row>
     <ion-col col-6 *ngFor="let sr of searchResult">
       <ion-card>
         <ion-card-header>
           <ion-badge>Price: {{sr.PLL_NEW_PRICE}}</ion-badge>
           <ion-badge color="danger" slot="end">{{sr.ITEM_UOM_CODE}}</ion-badge>
         </ion-card-header>
         <img [src]="sr.ITEM_IMAGE_PATH" alt="No Image">

         <ion-card-content>
           <h5 class="title">
           {{sr.ITEM_FLEX_20}}
           </h5>
           <h5 class="title">{{sr.BRAND}}
           </h5>
           <div > Width &nbsp;&nbsp;&nbsp;&nbsp;: {{sr.ITEM_WIDTH}}</div>
           <div > Repeat &nbsp;&nbsp;: {{sr.ITEM_REPEAT_DESIGN}} </div>
           <div > Uses &nbsp;&nbsp;:{{sr.ITEM_USES}} </div>
           <ion-item>
             <button ion-button (click)="doInquery(sr.ID)" color="secondary" full>Stock Inquery</button>
           </ion-item>
           <!-- display result here-->
         </ion-card-content>
       </ion-card>
     </ion-col>
   </ion-row>

home.ts

doInquery(id: number){
  //some calculation
  return result;
}

Upvotes: 2

Views: 181

Answers (1)

Sami Haroon
Sami Haroon

Reputation: 909

In your HTML bind a results variable SAY - result 

<ion-row>
 <ion-col col-6 *ngFor="let sr of searchResult">
   <ion-card>
     <ion-card-header>
       <ion-badge>Price: {{sr.PLL_NEW_PRICE}}</ion-badge>
       <ion-badge color="danger" slot="end">{{sr.ITEM_UOM_CODE}}</ion-badge>
     </ion-card-header>
     <img [src]="sr.ITEM_IMAGE_PATH" alt="No Image">

     <ion-card-content>
       <h5 class="title">
       {{sr.ITEM_FLEX_20}}
       </h5>
       <h5 class="title">{{sr.BRAND}}
       </h5>
       <div > Width &nbsp;&nbsp;&nbsp;&nbsp;: {{sr.ITEM_WIDTH}}</div>
       <div > Repeat &nbsp;&nbsp;: {{sr.ITEM_REPEAT_DESIGN}} </div>
       <div > Uses &nbsp;&nbsp;:{{sr.ITEM_USES}} </div>
       <ion-item>
         <button ion-button (click)="doInquery(sr.ID, $event)" color="secondary" full>Stock Inquery</button>
       </ion-item>
       <p>{{result}}</p>
     </ion-card-content>
   </ion-card>
 </ion-col>

And in you .ts file create a result variable.

result:any;
doInquery(id: number, event:any){
  this.result = (some calculations result of Event data and ID);
  return this.result;
}

This is the two-way binding solution. You can do it through an event-service as well.

Thanks Pal.

Upvotes: 1

Related Questions