How to make the ion-item selectable In Ionic - ionic-framework

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

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>
In this, It will show the checkbox for all the items and the text also.

Related

ion-item-options not displaying

I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.
<ion-list text-wrap>
<ion-list-header>
...
</ion-list-header>
<ion-item *ngIf="classes?.length === 0">No Data</ion-item>
<ion-item-group *ngFor="let classObj of classes">
<ion-item-divider>...</ion-item-divider>
<ion-item-sliding *ngFor="let class of classObj?.classes">
<ion-item *ngFor="let class of classObj?.classes">
<ion-grid>
...
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary">
Change
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
I have no idea what went wrong. This happened to both Android and iOS
Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now
I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>

How to restrict user to select only one item from the item list in Ionic

I am working In Ionic App and I have shown the item list in which I have the checkbox for the item selection. User can select only one item but the problem is that, In my item list user is able to select all items.
This is my shopping.html:
<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>
In this, I am showing the check-boxes with the items where user can select the item.
This is my shopping.ts:
isCheckboxDisabled:boolean=false;
selectCP(itm){
}
I am not able to make the logic for that. In my html, user can select all the items. Any help is much appreciated.
You may use ion-radio instead.
<ion-list>
<ion-radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-label>{{itm.name}}</ion-label>
<ion-radio value="{{itm.id}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

How to disable the button until radio button is checked in Ionic

I am working in the Ionic App and In that I have some list items with the radio button and at the bottom of the page, I have the checkout button. I want to disable the button until the user checked one of the item.
This is my shipping.html:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-list radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-radio item-start value="{{itm.id}}"></ion-radio>
<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 class="myedit22" (click)="editshipping(itm)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end class="dele22" (click)="removeshipping(itm.id)">
<ion-icon name="ios-trash-outline"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-12 style="text-align: right;">
<button (click)="presentProfileModal()" class="myaddto22" ion-button square item-right>
Add Address
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="single-footer" style="bottom: 51px; background-color: #fff;">
<ion-grid>
<ion-row>
<ion-col class="addCart">
<button class="myaddto22" [disabled]="!value" full ion-button round="true">
Make Payment
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
In this html, I am showing the items with the radio button and the checkout button at the bottom of the page but the problem is that, I am not able to disable the bottom button until the user checks the radio button.
In this, I am showing the items with the radio button and I have the button at the bottom. It will disable until the user select the item but the problem is that when the user select the item after that the button is not clickable.
Any help is much appreciated.
Seems like you need to store the selected radio button in a model, and then set your disabled flag based on that.
<ion-list radio-group [(ngModel)]="yourSelectedRadioValue">
...
<button class="myaddto22" [disabled]="!yourSelectedRadioValue" full ion-button round="true">
Make Payment
</button>

ionic2: Need help in displaying product list with ion-item

I would like to display a product list with ion-list and ion-item.
For each product, the first line show the product name and second line should show the product details in small fonts.
An icon on the right end to open a product detail page.
Below is the code snippet:
<ion-list>
<ion-item *ngFor="let product of productArray">
<ion-label>{{product.name}}</ion-label>
<div item-content>
Rate: {{product.rate}} Tax : {{product.tax}}
</div>
<button ion-button icon-only item-right (click)='editProduct(product)'>
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-item>
</ion-list>
The product details do not show on the second line. It shows on the first line with details aligned to the right.
Try this please:
<ion-list>
<ion-item *ngFor="let product of productArray">
<p>{{product.name}}</p>
<p>
Rate: {{product.rate}} Tax : {{product.tax}}
</p>
<button ion-button icon-only item-right (click)='editProduct(product)'>
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-item>
</ion-list>

Ionic2 ion-item-sliding not working with *ngFor dynamic list

ionic-angular version is 2.0.0-rc.2
if I remove *ngFor, using a static list instead, it works fine. The following is the code snippet.
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.subject}}</h2>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon> Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
I notice problem with ion-item-sliding, when slide, it not keep slided item, so not allows to click ion-item-options button
The above code is tested and finally has run successfully with dynamic data from outside.
The problem is that when item is calling just add the little code. async pipe after the loop.
The Final code will be....
<ion-list>
<ion-item-sliding *ngFor="let item of items | async">
<ion-item>
<h2>{{item.subject}}</h2>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon> Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Hopefully, Above code will work fine.