CODEWITHSUNDEEP
ionic-frameworkionic3
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to make the ion-item selectable In Ionic

I am working in Ionic app and I have used the ion-item in my app and I want select one item before moving to the next page but I am not able to select the item.

This is my shipping.html:

<ion-list *ngFor="let itm of shippingdetails">
    <ion-item-divider>
    <ion-checkbox slot="end"></ion-checkbox>
    <h2>{{itm.name}}</h2>
    <p>{{itm.mobile}}</p>
    <button ion-button outline item-end>
      <ion-icon name="create"></ion-icon>
    </button>
    <button ion-button outline item-end>
      <ion-icon name="trash"></ion-icon>
    </button>
    </ion-item-divider>
</ion-list>

In this, I am showing the items in the loop. It is showing the data but the problem is that I am not able to select the item. I have also used the checkbox but when using the checkbox, it is not showing the p and h2 tags in the view.

enter image description here

This is result in the html, when using the checkbox it is not showing the p and h2 tag. When I am not using the checkbox, it is showing the p and h2 tag.

Any help is much appreciated.

Upvotes: 0

Views: 1898

Answers (1)

Rahul Pamnani
Rahul Pamnani

Reputation: 1435

Just Try This: It Works!

<ion-list *ngFor="let itm of shippingdetails">
          <ion-item-divider>
            <ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
            <!-- <ion-radio slot="start"></ion-radio> -->
            <!-- <ion-toggle slot="start"></ion-toggle> -->
            <ion-label>
            <h2>{{itm.name}}</h2>
            <p>{{itm.mobile}}</p>
            <p>{{itm.state}}, {{itm.city}}</p>
            <p>{{itm.address}}</p>
            <p>Pincode: {{itm.pincode}}</p>
            </ion-label>
            <button ion-button outline item-end>
              <ion-icon name="create"></ion-icon>
            </button>
            <button ion-button outline item-end>
              <ion-icon name="trash"></ion-icon>
            </button>
          </ion-item-divider>
</ion-list>

enter image description here

In this, It will show the checkbox for all the items and the text also.

Upvotes: 2

Related Questions