CODEWITHSUNDEEP
javascriptionic-frameworkion-item
Jean Val Jean
Jean Val Jean

Reputation: 13

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

enter image description here

Upvotes: 1

Views: 1409

Answers (1)

Najam Us Saqib
Najam Us Saqib

Reputation: 3404

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

Upvotes: 1

Related Questions