CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
cdh429
cdh429

Reputation: 357

ionic 3 Close ion-item-sliding

I have a sliding item that when you swipe it open, it reveals a submit button.

enter image description here

enter image description here

After you hit submit, I would like for the button to close and hide the "submit". I can't seem to find any documentation for closing sliding elements that relate to buttons or any hacks around it. Any suggestions? Working in Ionic 3...

Upvotes: 10

Views: 10720

Answers (4)

Sampath
Sampath

Reputation: 65870

Ionic 5+ / Angular 12+

This works for me: i.e. I need to close all the opened sliding items when the page leaves.

.html

<ion-list #slidingList>  
  //sliding code
</ion-list>

.ts

 @ViewChild('slidingList') slidingList: IonList;

  constructor() {}

 ionViewDidLeave(): void {
   this.slidingList.closeSlidingItems();
  }

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

the other answers are totaly correct but we don't need to pass a refrence of component just tp call close method , I usually try to do something like this logic if possible on the template,and here is a prefect example where we just want to call a method related to component.

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
     <button ion-button (click)="share();slidingItem.close()">Share</button>
     <button ion-button routerLink="/" (click)="slidingItem.close()"> Det</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

with event binding we can call more than method if we separate them with ; like this (click)="share();slidingItem.close()"

Upvotes: 2

sebaferreras
sebaferreras

Reputation: 44659

Just like you can see in the docs:

Close the sliding item. Items can also be closed from the List.

The sliding item can be closed by grabbing a reference to ItemSliding. In the below example, the template reference variable slidingItem is placed on the element and passed to the share method.

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

And then:

import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

Upvotes: 12

user5085788
user5085788

Reputation:

From the Ionic Documentation:

Html:

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TypeScript:

import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

Upvotes: 4

Related Questions