CODEWITHSUNDEEP
htmlangulartypescriptionic-framework
OnlyYannick
OnlyYannick

Reputation: 89

Ionic / Angular - ngFor hand over item.id on (click) event

I have an list and I want to change the height of the card when I click on a button (the button is on the card) but, how I do this?

I try to hand over the item.id on a click event and use the id in the function but i get an error when i want to use (click="details({{item.id}})".

So how i can solve the problem?

here the html code:

 <ion-card>
    <ion-card-content class="date-card">
        <h1 class="date">{{date}}</h1>
    </ion-card-content>
</ion-card>
<ion-card *ngFor="let item of items" id="{{item.id}}" >
  <ion-card-content class="content-box">
    <ion-card-title class="title">{{item.label}}</ion-card-title>
    <h2 class="md-text"><ion-icon name="time" ></ion-icon>  {{item.time_start}}</h2>
    <h2 class="md-text"><ion-icon name="calendar" ></ion-icon>  {{item.date_start}}</h2>
    <h2 class="md-text"><ion-icon name="compass" ></ion-icon>  {{item.location_text}}</h2>
  </ion-card-content>
  <div class="icon-div">
    <button class="icon-button">
      <ion-icon class="icon-button-icon" name="star"></ion-icon>
    </button>
    <button class="icon-button" (click)="details()">
      <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
    </button>
    <button class="icon-button">
      <ion-icon class="icon-button-icon" name="share"></ion-icon>
    </button>
  </div>
</ion-card>

And sorry for my bad english^^

Upvotes: 1

Views: 1374

Answers (3)

Praveen Kumar Tripathi
Praveen Kumar Tripathi

Reputation: 290

You are in the scope of ngFor so you can use item variable 

<ion-card>
        <ion-card-content class="date-card">
            <h1 class="date">{{date}}</h1>
        </ion-card-content>
    </ion-card>
    <ion-card *ngFor="let item of items" **[id]="item.id"** >
      <ion-card-content class="content-box">
        <ion-card-title class="title">{{item.label}}</ion-card-title>
        <h2 class="md-text"><ion-icon name="time" ></ion-icon>  {{item.time_start}}</h2>
        <h2 class="md-text"><ion-icon name="calendar" ></ion-icon>  {{item.date_start}}</h2>
        <h2 class="md-text"><ion-icon name="compass" ></ion-icon>  {{item.location_text}}</h2>
      </ion-card-content>
      <div class="icon-div">
        <button class="icon-button">
          <ion-icon class="icon-button-icon" name="star"></ion-icon>
        </button>
        <button class="icon-button" **(click)="details(item.id)"**>
          <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
        </button>
        <button class="icon-button">
          <ion-icon class="icon-button-icon" name="share"></ion-icon>
        </button>
      </div>
    </ion-card>

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

You are in the scope of ngFor so you can use item variable , as long you are in ion-card body you can use item variable 

<ion-card *ngFor="let item of items" id="{{item.id}}" >
  ...
      <button class="icon-button" (click)="details(item.id)">
        <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
      </button>
...
</ion-card>

ngFor Local variables

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

Pass it without the curly brackets

(click)="details(item.id)".

Upvotes: 2

Related Questions