I'm trying to reverse the direction of the ion-refresher, but switching the position doesn't seem to work like it does on the Ion-Infinite-Scroll
<ion-refresher [position]="isReverse ? 'bottom' : 'top'" pullingIcon="arrow-dropdown" pullingText="Pull to refresh"
refreshingSpinner="circles" refreshingText="Refreshing..." (ionRefresh)="refresh($event)">
</ion-refresher>
<ion-infinite-scroll *ngIf="!isPagingComplete" (ionInfinite)="doInfinite($event)" [position]="isReverse ? 'bottom' : 'top'">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="isNotSliding">
<template *ngFor="let entity of entityList" [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}">
</template>
</div>
<div *ngIf="!isNotSliding">
<ion-item-sliding class="page-list-sliding-item" *ngFor="let entity of entityList" #item>
<ion-item class="page-list-inner-item" (click)="config.onItemClick(entity)" >
<template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" *ngIf="config && config.canDelete" (click)="delete(entity.id)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button color="dark" >
<ion-icon name="more"></ion-icon>More
</button>
</ion-item-options>
</ion-item-sliding>
</div>
How can I reverse the scroll on the Ion-Refresher?
The ion-refresher component is a really special one.
It will always be placed at the top of the nearest ion-content component.
There is no default option or configuration to make the reverse ion-refresher possible.
Related
As per screenshot attachment, I would like all Ion Items sliding to open together when I trigger the Edit Button in a div,
Currently it only slides out the 1st delete ion items and the others remain unopened.
this is my code
HTML
<div class="editcontainer1" (click)="trigger()">Edit</div>
<ion-item-group *ngFor="let p of cart" #myItemsId >
<ion-item-sliding #slidingItem lines="none">
<div class="maincontainer">
<ion-item>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger"
(click)="removeCartItem(p)">
<div style="color: seashell;">Delete</div>
</ion-item-option>
</ion-item-options>
</div>
</ion-item-sliding>
</ion-item-group>
TS
trigger() {
this.itemSlidingList.open('end');
}
else {
this.itemSlidingList.close();
}
how do i modify to become opens all?
openAllSlides(item) {
let a = Array.prototype.slice.call(item.el.children)
a.map((val) => {
val.open();
})
}
thank you.
Screenshot
you can do something like:
<ion-list>
<ion-item-group #myItemsId> <!-- use ITEM id for group -->
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option >Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
<ion-button (click)="openAllSlides(myItemsId)">open all slides</ion-button>
.ts
openAllSlides(item){
let a = Array.prototype.slice.call( item.el.children )
a.map((val)=>{
val.open();
})
}
I have set up several form that takes info for an upload logic: like one takes then picture, one the description, one other setting. Now I want that this is all stored in one single form, but while it still worked when using different form now I get this error:
ERROR TypeError: Cannot read property 'controls' of undefined
I have no idea why is that. I also cannot submit a new description which I want to make with <div (ngSubmit)="addTag()">
Here is my code:
html:
<form [formGroup]="categoryForm">
<ion-grid class="white">
<ion-row class="checkbox-tags rounded-checkbox-tags">
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="images"></ion-icon>
<ion-checkbox formControlName="tag_1"></ion-checkbox>
</ion-item>
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="camera"></ion-icon>
<ion-checkbox formControlName="tag_2"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
<ion-row class="range-item-row">
<ion-col size="12">
<div class="range-header">
<span class="range-value">{{ rangeForm.controls.dual.value.lower }}</span>
<span class="range-label">temperature</span>
<span class="range-value">{{ rangeForm.controls.dual.value.upper }}</span>
</div>
</ion-col>
<ion-col size="12">
<ion-range mode="md" class="range-control" formControlName="dual" color="danger" pin="true" dualKnobs="true" debounce="400"></ion-range>
</ion-col>
</ion-row>
<div (ngSubmit)="addTag()">
<ion-item>
<ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
<ion-button [disabled]="!categoryForm.valid || tagList?.length > 0" type="submit" icon-only>
<ion-icon name="checkmark"></ion-icon>
</ion-button>
</ion-item>
</div>
</form>
<ion-chip class="chip" color="dark" *ngFor="let tag of tagList; let i = index">
<ion-icon name="pricetag"></ion-icon>
<ion-label class="set-label">{{ tag }}</ion-label>
<ion-icon name="close-circle" (click)="removeChip(i)"></ion-icon>
</ion-chip>
</ion-content>
<ion-footer>
<ion-button [disabled]="!tagList?.length > 0" (click)="confirm()" expand="block" type="submit">POST</ion-button>
</ion-footer>
typescript:
categoryForm: FormGroup;
...
addTag() { // properly access and reset reactive form values
const tagCtrl = this.categoryForm.get('category');
if (tagCtrl.value) {
this.tagList.push(tagCtrl.value);
this.tagInput = ''; // in order to have an empty input
}
}
ngOnInit() {
this.storage.get('image_data').then((imageFile) => {
this.imageForm.patchValue({
'image': this.storage.get('image_data')
});
});
this.categoryForm = new FormGroup({
'dual': new FormControl({lower: 100, upper: 150}),
'tag_1': new FormControl(true),
'tag_2': new FormControl(true),
'category' : new FormControl('', Validators.compose([
Validators.maxLength(25),
Validators.minLength(1),
Validators.required
])),
'image': new FormControl(null)
});
}
I have an ionic list that is filled with an ngfor. The list fills without problem, it locks up a bit, however in the console a syntax error appears for one of the ngfor tags.
My Ionic info is:
ionic (Ionic CLI) : 4.12.0
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.3
This is the code of my template:
<ion-content padding>
Tap sobre el producto para añadirlo a favoritos.
<ion-list>
<ion-item-sliding *ngFor="let task of tasks; let i = index">
<ion-item (click)="gofav(task.id)">
<ion-avatar item-start>
<img src="{{ task.foto }}">
</ion-avatar>
<h2 style="padding: 15px 15px;"> {{ task.nombre }}
<ion-icon *ngIf="task.favs == 1" name="star"></ion-icon>
<ion-icon *ngIf="task.favs == 0" name="star-outline"></ion-icon>
</h2>
<p>{{ task.presentacion | presentacion }}</p>
<h1 item-end>{{ task.precio }}</h1>
</ion-item>
<ion-item-options>
<button ion-button color="primary" icon-start (click)="deleteproduct(task.id)">
<ion-icon name="trash"></ion-icon>
Borrar
</button>
<button ion-button color="light" icon-start (click)="gotomodproduct(task.id)">
<ion-icon name="keypad"></ion-icon>
Modificar
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Cargando más productos..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
The error that comes up in console is this:
This is the example of the data in a "task" object.
{
brand: 0,
catg: "116",
codigo: "7861006000202",
favs: 1,
foto: "file:///data/data/io.ionic.starter/files/taoEhpeVIJ.jpg",
id: 24,
iddb: 313,
impor: 0,
nombre: "Paños Multiusos Super Absorbentes",
origfrm: 1,
precio: "300,00",
presentacion: "2 Unidades"
}
I have an ngFor which generates multiple ion-cards. Inside each card there's a button. The problem is that when I click on any of the buttons to change its text the text of other buttons also change. How can I prevent that?
<ion-card *ngFor="let item of unack, let i = index">
<ion-card-header>
<p [ngStyle]="{'color': buttonColor2}">{{status1}}</p>
</ion-card-header>
<ion-card-content>
<p align="center">Stores for order</p>
<img src="">
<div class="orderInfo">
<p>Delivery Time</p>
<p>{{item.delivery_from}} to {{item.delivery_to}}</p>
</div>
<div class="Custom">
<p>Customer</p>
<p>{{item.customer_name}} {{item.customer_surname}}</p>
</div>
</ion-card-content>
<ion-list>
<button class="Ack" *ngIf="HideACk" (click)="StartS(item)">
{{Acknowledge}}
</button>
You have to bind all attributes to object inside the unack array. example -> every object should have Acknowledge property.
<ion-content padding>
<ion-card *ngFor="let item of unack, let i = index">
<ion-card-header>
<p [ngStyle]="{'color': unack[i].buttonColor2}">{{unack[i].status1?unack[i].status1:""}}</p>
</ion-card-header>
<ion-card-content>
<p align="center">Stores for order</p>
<img src="">
<div class="orderInfo">
<p>Delivery Time</p>
<p>{{item.delivery_from}} to {{item.delivery_to}}</p>
</div>
<div class="Custom">
<p>Customer</p>
<p>{{item.customer_name}} {{item.customer_surname}}</p>
</div>
</ion-card-content>
<ion-list>
<button class="Ack" *ngIf="!unack[i]?.StartO" (click)="StartS($event, i)">
Acknowledge
</button>
<button class="Ack" *ngIf="unack[i]?.StartO" (click)="customer_pressed($event, i)">
Start Shopping
</button>
</ion-list>
</ion-card>
</ion-content>
this is your edited code Stackblits link
It should change in all because the interpolation that you are doing on Acknowledge variable is happening for all the cards. All cards are binding same Acknowledge variable, In your example, every button will consider same Acknowledge variable and value Acknowledged Order will be displayed. if you want you can create another property in item object, let say ack and assign some different text to it then render {{item.ack}}, check the following example
<ion-content padding>
<ion-card *ngFor = "let item of unack">
<button (click) = "StartS(item)" ion-button>
{{item.ack}}
</button></ion-card>
</ion-content>
Js file may look like :
export class HomePage {
public unack = [
{ name : 'apple', color : 'red', ack : 'Not acknowledged'},
{ name : 'orange', color : 'red', ack : 'Not acknowledged'},
{ name : 'penut', color : 'brown', ack : 'Not acknowledged'},
{ name : 'milk', color : 'white', ack : 'Not acknowledged'}
]
constructor(public navCtrl: NavController) {
}
StartS(item){
item.ack = item.ack == "Not acknowledge" ? "Acknowledged Order" : "Not acknowledge"
}
}
I have start.html file having options property having of the and I will define them in options1 in class StartPage
<ion-slide [options]="option1" *ngFor="let slide of slides; let last = last">
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
<p [innerHTML]="slide.description"></p>
<div id="skip-b">
<button (click)="dismiss()">
{{last ? "Let's Begin" : "Skip" }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
</ion-slide>
start.ts:
export class StartPage {
option1 = {
loop: true,
direction: 'vertical'
};
}
You need to add the options in the ion-slides component as shown in their docs.
<ion-slides [options]="option1">
<ion-slide *ngFor="let slide of slides; let last = last">
<img [src]="slide.image" class="slide-image" />
<h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
<p [innerHTML]="slide.description"></p>
<div id="skip-b">
<button (click)="dismiss()">
{{last ? "Let's Begin" : "Skip" }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
</ion-slide>
</ion-slides>
In the new version of ionic we can easily achieve vertical scroll by passing [options] value to <ion-slides>.
Here is an example.
// page.ts
export class SlideClass {
slideOptions = {
direction: 'vertical',
};
constructor(){}
}
// html file
<ion-slides [options]="slideOptions">
More option we can found here more slide options
you can make your slides vertical by adding ''direction'' parameter.
<ion-slides direction="vertical">
</ion-slides>
by default slides are horizontal.