It can't show in console log, but I can run pass in ionic version 3 or 4. Now I use Ionic 5.
I can't get the point from select in radio. I don't know what wrong when run it's not show any problem.
in file html
<ion-item-sliding *ngFor = "let q of Questionlist ; let i = index" >
<p>{{ q.qname }}</p>
<ion-radio-group>
<ion-row>
<ion-col>
<ion-item text-wrap >
<ion-radio mode="md" value={{q.ansp}} (ionSelect)="mcqAnswer(q.ansp,i)"></ion-radio>
<ion-label> {{q.ans }}</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item text-wrap>
<ion-radio mode="md" value={{q.ans1p}} (ionSelect)="mcqAnswer(q.ans1p,i)" ></ion-radio>
<ion-label>{{q.ans1 }}</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item text-wrap>
<ion-radio mode="md" value = {{q.ans2p}} (ionSelect)="mcqAnswer(q.ans2p,i)"></ion-radio>
<ion-label class= "text-wrap">{{ q.ans2 }}</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item text-wrap>
<ion-radio mode="md" value={{q.ans3p}} (ionSelect)="mcqAnswer(q.ans3p,i)"></ion-radio>
<ion-label>{{q.ans3 }}</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-item-sliding>
</div>
in file ts
mcqAnswer(value, index) {
let anws = { p: value, i: index }
if (this.anwsList[index] !== undefined && index == this.anwsList[index].i) {
this.anwsList[index].p = value
} else {
this.anwsList.push(anws)
}
console.log("=>", value, "=>", index)
console.log("===>", this.anwsList)
}
Thank you for helping me
if you want to get the value of the selected radio button you must use the ionChange event in the ion-radio-group tag.
then you have to pass the $event as a function argument to the .ts file.
I recommend you to log it in the console to see what happens.
I hope it helps.
Related
Having problems trying to nest lists, I expected them to be inset the further down they go, but instead I've got a complete mess as you can see in the screenshot below.
Here's the code:
<ion-content padding>
<div *ngIf="categories && categories.length > 0; then validContent else noContent"></div>
<ng-template #validContent>
<p>Please select the categories you wish to receive content for.</p>
<form (ngSubmit)="processForm($event)" id="userForm" class="ssp__form">
<ion-list lines="none" no-padding>
<ion-item lines="none" *ngFor="let category of categories">
<ion-label>{{ category.name }}</ion-label>
<ion-checkbox [name]="category.slug" [(ngModel)]="submissionData[category.term_id]"></ion-checkbox>
<ion-list inset="true" style="width:100%;" lines="none" no-padding *ngIf="category.children.length > 0">
<ion-item *ngFor="let subCategory of category.children">
<ion-label>{{ subCategory.name }}</ion-label>
<ion-checkbox [name]="subCategory.slug" [(ngModel)]="submissionData[subCategory.term_id]"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
<ion-button type="submit" style="width:100%;" color="primary" expand="block">Save Categories</ion-button>
</form>
</ng-template>
<ng-template #noContent>
<ion-card>
<ion-card-header>
<ion-card-title style="text-align: center; font-size: 14px;">No Categories Found.</ion-card-title>
</ion-card-header>
<ion-card-content>
<p style="text-align: center">There are no categories for you to read at this time.</p>
</ion-card-content>
</ion-card>
</ng-template>
</ion-content>
I am using ion-select in my app. But when i run it on the device, ion-select shows three dots in spite of having sufficient space.
My Code is
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item">
<ion-select placeholder="Size" interface="popover">
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
I have already tried using max-width:100% . ion-select works perfectly when i use it in new row. But i want to display it with other item in the same row.
Please help, i have been searching the net for the last 5-6 hours but no help.
Use text-wrap in ion-item or ion-select,it will wrap your select text.
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item" text-wrap>
<ion-select placeholder="Size" interface="popover" text-wrap>
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
Then if it is not working then give min-width to ion-select in css
i'm working with ionic 4 angular 7. I'm using <ion-reorder> to reorder list. Drag n Drop works for the first time fine but when I release the click, item got stuck. After first reorder everything freezes. And I'm unable to attempt reorder for the second time.
Here my .html file
<ion-list lines="none">
<ion-reorder-group disabled="false">
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-thumbnail no-margin item-start>
<img src="../assets/images/5.jpg">
</ion-thumbnail>
<div class="pl-2">
<h5 no-margin>Multan</h5>
<p no-margin>Historical place...</p>
</div>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
When I drag n Drop Item. It get stuck when I drop it. After this, everything freezes.
Any Help...?
I'm using
Ionic: 4.10.2
Angular: 7.3.0
I think you need to store your data in a variable and ngFor on these data to build your reorder items.
this.items: Array<img: string; title: string; description: string; icon:
string> = [yourArrayOfObjects];
I think then you need to catch the ionItemReorder event like this
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
and in your .ts the reorderItems() function could be
reorderItems(ev) {
const itemMove = this.items.splice(ev.detail.from, 1)[0];
this.items.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}
The key here is to complete the event and you have to do it manually. So the ionItemReorder event callback is a must. So something as simple as this should do the trick:
Typescript :
public onItemReorder({ detail }) {
detail.complete(true);
}
HTML :
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="false">
ionic4 version:
html code:
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>INCLUDE</ion-label>
</ion-list-header>
<ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
<ion-item *ngFor="let accessory of accessories">
<ion-label>{{accessory}}</ion-label>
<ion-reorder></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
</ion-content>
typescript code:
accessories = ['test', 'test1', 'test2'];
reorder(event) {
const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
this.accessories.splice(event.detail.to, 0, itemToMove);
}
This will never throw any type of error, it works. I am 100% sure, have used 3-4 times. I hope, this will also help you.
<ion-list >
<ion-item-group (ionItemReorder)="reorder($event)" reorder='true' >
<ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
<ion-avatar item-left >
<img src="assets/{{item.bunch}}.svg">
</ion-avatar>
<h2 color="primary_secound">{{item.bunch}}
</h2>
<p>Click To See Menu of {{item.bunch}}
</p>
<ion-icon name="arrow-dropright" item-right></ion-icon>
</ion-item>
</ion-item-group>
</ion-list>
reorder(event) {
const itemToMove = this.file_uri.splice(event.from, 1)[0];
this.file_uri.splice(event.to, 0, itemToMove);
}
With Angular - Ionic - Typescript
in HTML file/Code:
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
<ion-item *ngFor="let item of yourArray">
<ion-label> {{ item.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
Controller or .ts Code:
reorderItems(ev): void {
const itemMove = this.yourArray.splice(ev.detail.from, 1)[0];
this.yourArray.splice(ev.detail.to, 0, itemMove);
ev.detail.complete();
}
As per the above example, If you did not add reorderItems() in your controller it will not work. you can change function name as you like.
I have referred this example from ionic framework documentation and created a segment of my own.
<div padding>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
...
</ion-list>
<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-kitten-1.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
...
</ion-list>
</div>
Here, they are displaying different ion-list on different button clicks.
But I am a different element type to be displayed on two different button clicks.
Here is my code-
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
//this is coming
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
//this is not coming
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let images of image; let i = index;">
<ion-row *ngIf="i % 3 === 0">
<ion-col col-4 *ngIf="i < images.length">
<img [src]="images[i].url" />
</ion-col>
<ion-col col-4 *ngIf="i+1 < images.length">
<img [src]="images[i+1].url" />
</ion-col>
<ion-col col-4 *ngIf="i+2 < images.length">
<img [src]="images[i+2].url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
in .ts file i have stored images as
this.image = [
{ url: 'assets/imgs/placeholder.png'},
{ url: 'assets/imgs/placeholder.png' },
{ url: 'assets/imgs/placeholder.png' }
];
As you can see i want to display a ion-list on first segment button click and display a image grid on second segment button click. As of now nothing comes up when i click on the second button
I think you're for loop is not correct, You are using the loop and inside it, you are trying to use an index on each item which is not an array. Below code should be working
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let image of images; let i = index;">
<ion-row>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
How I can remove <ion-item> divider? I have the following code to show 4 items in a row:
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item color="dark">
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
and the output shows 4 images in a row, as excepted, but each image has a white divider below it. I don't want any divider.
I tried to set style="border:none" but it didn't do it.
This is for ionic 2 and 3. Please refer to this answer for higher versions of ionic
use no-lines
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item no-lines color="dark"><!-- here -->
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
For whatever reason, this didn't work for me.
But having lines="none" worked great.
For ionic v4
<ion-item lines="none">...</ion-item>
Pulled from ionic docs. https://ionicframework.com/docs/api/list
For ionic v4, you should use the lines property:
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item lines="none" color="dark">
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
Apply this for Ionic V4. Really it will work.. Happy coding
<ion-item lines="none">
</ion-item>
If you want to disable the lines / borders globally on all of your <ion-item>'s, just add the following code to your src/global.scss (default when generating a Ionic v4 App with Angular) of your application.
ion-item {
--border-width: 0;
--inner-border-width: 0;
}
The attribute lines="none" on a <ion-item> does nothing other.
Hope it helps someone.
Cheers
Unkn0wn0x
I tried with no-line but it didn't work in ionic 4
Only this work for me in ionic 4 :
<ion-item lines="none"> </ion-item>
<ion-list>
<ion-item lines="none" button detail *ngFor="let note of notesService.notes">
<ion-label>{{ note.title }}</ion-label>
</ion-item>
</ion-list>
I am on ionic 4, and lines="none" somethimes don't work.
So I use this line.
ion-list:not(.list-lines-none) ion-item::before{
border-width: 0 !important;
}
And this is my ionItem example. (It has hidden error property also)
<IonItem lines="none" detail={false}>
<IonIcon
className="w-40 h-40 float-left"
src="/assets/icon/store-black.svg"
/>
<IonLabel className="flex flex-col ml-10">
<h5 className="text-base font-bold m-0 ">Lorem ipsum </h5>
<span className="text-sm leading-tight">Kratki opis</span>
</IonLabel>
<IonIcon
className=" absolute top-50 right-30 w-15 h-15"
src="/assets/icon/arrow-right.svg"
/>
</IonItem>
use (lines="none") in your ion-item