i try to show a back button to switch between my components.
To do so i created this header:
<ion-header translucent >
<ion-toolbar >
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Registrieren</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<form [formGroup]="authdetails" >
<ion-item >
<ion-label position="floating">E-Mail</ion-label>
<ion-input formControlName="email" type="email"></ion-input>
</ion-item>
<ion-item >
<ion-label position="floating">Nutzername</ion-label>
<ion-input formControlName="nickname" type="email"></ion-input>
</ion-item>
<ion-item >
<ion-label position="floating">Passwort</ion-label>
<ion-input formControlName="pw" type="password"></ion-input>
</ion-item>
<br>
<ion-item lines="none">
<ion-label >Hiermit bestätige ich den Datenschutz</ion-label>
<ion-checkbox slot="start" formControlName="privacy"></ion-checkbox>
</ion-item>
<ion-item lines="none">
<ion-label >Hiermit bestätige ich die AGB's </ion-label>
<ion-checkbox slot="start" formControlName="agb"></ion-checkbox>
</ion-item>
</form>
<div align="center">
<button class="button register"
(click)="performRegister()">Registrieren</button>
</div>
</ion-content>
The way i'm routing to this view is like i did here:
<button class="button register" routerLink="/register">Kostenlos Registrieren</button>
The problem is that the back button is showed really small, please find attached a screenshot:
Related
with ion-split-page added, I am not able to see my side menu options which are displaying properly in mobile view.
`
<ion-app>
<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu side="start" menuId="m1" contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Wanderlust</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/places/tabs/discover">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>Discover Places</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/bookings">
<ion-icon name="checkbox-outline" slot="start"></ion-icon>
<ion-label>Your Bookings</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" (click)="onLogout()" button>
<ion-icon name="exit" slot="start"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
</ion-app>
`
Does anyone know how to solve this issue?
We need to add autoHide="false" attribute on ion-menu-toggle.
<ion-menu-toggle autoHide="false">
I am trying to have a red button in an ion-item-sliding element in Ionic 4. Here is the code:
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p>test</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<button ion-button color="danger">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-card>
However, the button shows in gray while it should be red. I also tried using ion-button instead of button. It worked, but when I coupled it with expand="full" the color of button's text turned red instead of the color of button itself.
Use the defaut button is working fine:
<ion-card>
<ion-item-sliding>
<ion-item>
<ion-avatar slot="start">
<img src="assets/shapes.svg">
</ion-avatar>
<ion-label>
<h3>test</h3>
<p>test</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" expandable>
<ion-icon name="trash"></ion-icon>Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
Hope it helps you :)
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>
I have an ion-list on page, and I want to scroll only list-item, not the whole ion-content.
Here is my code:
<ion-content scroll="false" no-padding>
<ion-list>
<ion-list-header>Select your Status</ion-list-header>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
<ion-item>
<h2>Busy</h2>
</ion-item>
<ion-item>
<h2>At school</h2>
</ion-item>
<ion-item>
<h2>At the movies</h2>
</ion-item>
<ion-item>
<h2>At work</h2>
</ion-item>
<ion-item>
<h2>Battery about to die</h2>
</ion-item>
<ion-item>
<h2>Can't talk, text only</h2>
</ion-item>
<ion-item>
<h2>In a meeting</h2>
</ion-item>
<ion-item>
<h2>At the gym</h2>
</ion-item>
<ion-item>
<h2>Sleeping</h2>
</ion-item>
<ion-item>
<h2>Urgent calls only</h2>
</ion-item>
</ion-scroll>
</ion-list>
</ion-content>
I want to fix list-header "Select your status" and scroll only other list-items, but it hides list-header even when I have set scroll="false" to ion-content.
Please help.
Thanks in advance.
You can do as such:
html
<ion-header>
<ion-list-header>Select your Status</ion-list-header>
</ion-header>
<ion-content scroll="false" no-padding>
<ion-list>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
...
</ion-scroll>
</ion-list>
</ion-content>
Position your ion-list-header inside of ion-header to make it sticky
Result:
Add "sticky" attribute in ion-list-header tag.
Applicable in ionic 2, ionic 3, ionic 4