Ionic Item Sliding ngIf Issue

I have an ion-list that displays trip details. For the trip's status, there is an ion-item-sliding element that allows the user to do some action based on the status.

The issue is that when the action is performed and the status updates, the *ngIf that is being leveraged to show/hide the action appears to be effecting the sliding behavior.

For example, I have the following example where if the status is booked then the user can slide, click on "pickup", and the status is changed to in_progress. The issue is that the sliding behavior makes it so that the "complete" option is expanded and if you manually close it (either programmatically or if the user closes it) then it cannot be reopened:

  <ion-item-divider color="primary">
    <ion-label>Trip 1</ion-label>
  <ion-item-sliding #itemSlidingStatus>
      <ion-label>Status:</ion-label> {{status}}
    <ion-item-options side="end" *ngIf="status === 'booked'">
      <ion-item-option (click)="pickup()">Pickup</ion-item-option>
    <ion-item-options side="end" *ngIf="status === 'in_progress'">
      <ion-item-option (click)="complete()">Complete</ion-item-option>
import { Component, ViewChild } from '@angular/core';
import { IonItemSliding } from '@ionic/angular';

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  @ViewChild('itemSlidingStatus') private itemSlidingStatus: IonItemSliding;

  status = 'booked';

  complete(): void {
    this.status = 'completed';

  pickup(): void {
    this.status = 'in_progress';


How can I make it so that when I close the sliding option by calling itemSlidingStatus.close(), the element can be reopened?

Read more here:

Content Attribution

This content was originally published by David at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: