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>
Related
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>
I'm new in Ionic and I want to create list in which in each ion-item there will be checbox and when user checks it then select will appear in new line but still within ion-item. I've tried to use ion-item inside ion-item but then select wasn't showing. I've read that there is some issue with nested ion-items so I replaced first ion-item with ng-container but after that all layout looks terrible. What should I do?
<ion-list>
<ng-container *ngFor="let filter of filters">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked" (ionChange)="onCheckboxChange($event, filter)"></ion-checkbox>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ng-container>
</ion-list>
I figured it out - in ion-list I put ion-card-content with ngFor as a wrapper for ion-items. Works and looks good!
<ion-list>
<ion-card-content *ngFor="let filter of filters" class="card-wrapper">
<ion-item class="checkbox-item">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked"></ion-checkbox>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-list>
I run ionic 3 app on browser, when I slide, and click on delete it redirect on the itemDetails instead to reload the same list without the item deleted
<ion-list>
<ion-item-sliding *ngFor="let item of items" (click)="itemDetails($event, item)" (ionSwipe)="delete(item)">
<ion-item>
{{item.name}}
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="removeItem(item.id)">Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Try to put the (click)="itemDetails($event, item)" into the ion-item
<ion-list>
<ion-item-sliding *ngFor="let item of items" (ionSwipe)="delete(item)">
<ion-item (click)="itemDetails($event, item)">
{{item.name}}
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="removeItem(item.id)">Delete</button>
</ion-item-options>
</ion-item-sliding>
See working plunkr: https://plnkr.co/edit/FfaUWDxovuS0So5fvHCU?p=preview
You done very well my friend but you need to do like this
<ion-list>
<ion-item-sliding *ngFor="let item of items; let i=index;" (click)="itemDetails($event, item)">
<ion-item>
{{item.name}}
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="removeItem(i)">Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
and in .ts file you need to write this
public removeItem(index:number){
let id=yourarraylist[index].id
//remove logic
}
i think this would be helpful to you
I added this code to the removeItem function :
this.navCtrl.push(HelloIonicPage, {
item: item
});
So it seems to redirect to the main list but it is not the best way i think because reload the page is very slow
You can work with observables and use the aync pipe.
I am on my smartphone and cant provide examples but there should be enough out there.
Or you could try it with ngzone after deleting to Trigger an ui refresh.
The problem is the list of items is not getting the updated list. You have get the updated list after deleting it.
HTML
<ion-list>
<ion-item-sliding *ngFor="let item of items" (click)="itemDetails($event, item)" (ionSwipe)="delete(item)">
<ion-item>
{{item.name}}
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="removeItem(item.id)">Delete</button>
</ion-item-options>
</ion-item-sliding>
ts
removeItem(item) {
`your code`
loadItems(); #get the updated list
}
I've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference
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.