ionic 3 Close ion-item-sliding
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()"
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();
}
}
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 variableslidingItem
is placed on the element and passed to theshare
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(); } }