How to close a sliding item in ionic 4?

Ionic Framework
1

#3 template

<ion-item-sliding *ngFor="let item of collection.items; let i = index">
    <ion-item>
        <ion-label>
            <span>
                {{ item.name }}
            </span>
        </ion-label>
        <ion-note slot="end" *ngFor="let myitem of item.myitems">
            <span>{{ myitem.quantity }}</span>
        </ion-note>
    </ion-item>
    <ion-item-options side="end">
        <ion-item-option (click)="addItem(collection.id, item.id)">
            <ion-icon slot="icon-only" name="add"></ion-icon>
        </ion-item-option>
    </ion-item-options>
</ion-item-sliding>

ts file

import { IonItemSliding } from '@ionic/angular';

addItem(slidingItem: IonItemSliding, collectionID: any, itemId: any) {
    slidingItem.closeOpened();
}

Results in ERROR TypeError: slidingItem.closeOpened is not a function

But the docs say otherwise: https://ionicframework.com/docs/api/item-sliding

So am I doing something wrong?

2

Yeah, unfortunately Ionic 4 docs aren’t up to the same standard as previous versions - yet (I hope will improve)

Pretty sure you’re going to need an @ViewCild to interact with the component…

PS: @ViewChild has been updated in Angular and now needs a second paramenter …

https://angular.io/api/core/ViewChild

3

That worked, thank you. I copied the example on the page and modified:

@ViewChild(IonItemSliding) slidingItem: IonItemSliding;

However, I’m receiving an error: Expected 2 arguments, but got 1; An argument for 'opts' was not provided. Do you know why?

1 Like
4

Yeah, you missed what I said above…

PS: @ViewChild has been updated in Angular and now needs a second paramenter …

https://angular.io/api/core/ViewChild

1 Like
5

Yes I did. Thank you.

6

Thank you! this worked for me