We Keep Coding

Opens all Ion Item Sliding when clicked a button

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();
})
}

How to make of several forms one form?

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)
});
}

Why appear in console this error of ionic template?

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"
}

change the position of the ion-refresher

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.

Ionic2 + Angular2 - dynamic rate value with ion-icon star

I'm trying to build a simple dynamic rate from 0 to 5 stars (and its middle values like x.5 [example 4.5] ) that receives a value from the javascript.
I looked for something with *ngFor but I'm not understanding how that works. Can someone explain / help me?
If it helps, for ionic, we have 3 type of stars available:
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
For example if I receive from server a value rate = 3.5, it renders:
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
I'm using javascript, no typescript.
Thank you so much :)
p.s. not sure if this title is the better, any suggestion is welcome :)

Here's one way to do it:
<ion-item>
<ion-icon *ngIf="myRating>=1" name="star"></ion-icon>
<ion-icon *ngIf="myRating>=2" name="star"></ion-icon>
<ion-icon *ngIf="myRating>=3" name="star"></ion-icon>
<ion-icon *ngIf="myRating>=4" name="star"></ion-icon>
<ion-icon *ngIf="myRating>=5" name="star"></ion-icon>
<ion-icon *ngIf="myRating%1!=0" name="star-half"></ion-icon>
<ion-icon *ngIf="myRating==0" name="star-outline"></ion-icon>
<ion-icon *ngIf="myRating<=1" name="star-outline"></ion-icon>
<ion-icon *ngIf="myRating<=2" name="star-outline"></ion-icon>
<ion-icon *ngIf="myRating<=3" name="star-outline"></ion-icon>
<ion-icon *ngIf="myRating<=4" name="star-outline"></ion-icon>
</ion-item>
It takes up more space in the HTML, but doesn't require any additional javascript. Here, myRating is the star value. I tested it for all 11 possible values.

If you have an array like
value = ['star', 'star', 'star', 'star-half', 'star-outline'];
you can use ngFor to render your HTML like
<ion-icon *ngFor="let icon of icons" [name]="icon"></ion-icon>
or depending on what name is (property or attribute)
<ion-icon *ngFor="let icon of icons" name="{{icon}}"></ion-icon>

An alternative would be to create a function with switch case or if to return the type of the icon, to clean code html.
html:
<Ion-item>
   <Ion-icon [name]="validate(myRating)"> </ion-icon>
</Ion-item>
function:
Validate(e:string): string {
   Let res;
   if (e> 1){
   res="star";
}
else {
  res="star-outline";
}
   Return result;
}

I've reached this solutions using the tips that you guys provided:
function printRating (rating) {
let max_rate = 5;
let rounded_rating = Math.round(rating);
let array_stars = new Array(max_rate);
array_stars.fill('star-outline');
for(let i=0; i < rounded_rating; i++) {
array_stars[i] = 'star';
if(i === rounded_rating - 1 && rating % 1 !== 0) {
array_stars[i] = 'star-half';
}
}
return array_stars;
}
In my component I've associated to a variable the result array
this.stars = this.printRating(this.seller.rating);
And finally in the view I printed based on the result array
<ion-icon *ngFor="let star of stars" name="{{star}}"></ion-icon>
Hope this helps someone!