Why ionic spinner doesn't show up in my project? - ionic-framework

I add a spinner icon in my ionic project, but it doesn't up. I have tried to place the ionic-spinner item in different place in the html file, but it doesn't work. Can you help me to solve this problem?
HTML:
<ion-content>
<form (submit)="doLogin()">
<ion-list>
<ion-item>
<ion-label fixed>{{ 'EMAIL' | translate }}</ion-label>
<ion-input type="email" [(ngModel)]="account.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>{{ 'PASSWORD' | translate }}</ion-label>
<ion-input type="password" [(ngModel)]="account.password" name="password"></ion-input>
</ion-item>
<div padding>
<button ion-button color="primary" block>{{ 'LOGIN_BUTTON' | translate }}</button>
</div>
</ion-list>
</form>
<ion-spinner name="lines"></ion-spinner>
</ion-content>
SCSS:
page-login {
ion-spinner {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
}

Related

ionic back button showing not properly

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:

how to nest lists in ionic 4 without it looking a complete mess?

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>

Rectangular box as input value in ionic form

I created a login form using ionic4 which yields me a floating text row to enter the login credentials.
<ion-content>
<ion-title class="ion-text-center" >Login</ion-title>
<ion-item>
<ion-label position="floating" >Email Id</ion-label>
<ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating" >Password</ion-label>
<ion-input type="password" ></ion-input>
</ion-item>
<ion-text color="tertiary"><h6>Forgot Password?</h6></ion-text>
<div class="login-btn">
<ion-button class="login-button" expand="full">Login</ion-button>
</div>
<div class="not-a-member">
<ion-text>Not a member yet? </ion-text><ion-text color="tertiary"> Sign-Up</ion-text>
I want the rectangular input box in the form instead of floating text row.

Try this code:
<div style="margin: 10px;">
<ion-input type="email" placeholder="Email" [(ngModel)]="email" style="text-align: center; border: skyblue solid 0.5px;"></ion-input>
</div>
<div style="margin: 10px;">
<ion-input type="password" placeholder="Password" [(ngModel)]="password" style="text-align: center; border: skyblue solid 0.5px;"></ion-input>
</div>

ionic 4: <ion-reorder> not working as expected

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.

IONIC Text between two icons

I would like to have an ion-item inside a list with a word centered between two icons (one on left side and one on right side) like this:
I'm not able to achieve this goal, because I have something like that:
This is my code:
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<b>Woman</b>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
How can I have something like in the first image where the text it's centered correctly?

You can use text-align property for center your text like below
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<ion-label class="centerlabel">Woman</ion-label>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
SCSS
.centerlabel {
text-align: center;
}
Hope this will helps!

(Posted solution on behalf of the question author).
<ion-list>
<ion-item>
<ion-row>
<ion-col col-1 style="text-align: left;">
<ion-icon name="lock"></ion-icon>
</ion-col>
<ion-col col-10 style="text-align: center;">
<b>Woman</b>
</ion-col>
<ion-col col-1 style="text-align: right;">
<ion-icon name="lock"></ion-icon>
</ion-col>
</ion-row>
</ion-item>
</ion-list>

try this
<ion-list>
<ion-item >
<ion-icon item-left name="lock"></ion-icon>
<div text-center><b style="margin-left: -20px;">Woman</b></div>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
</ion-list>