ItemSliding - change content of list element after sliding

Ionic Framework ionic-v3
1

Hey!

Is it possible to change the whole content of an item element, after sliding it on left or right. I guess it have to be handled with (ionDrag). I could manipulate the item element, but in my case, I have to show different content (just one big text field) after sliding, like shown on the screenshot. Is this possible to realise?

image

Thanks in advance.

2

Heyho everyone,

My aim is it to change the item content after sliding. I tried it out in this way, but that works not proper. I have logged the percentage, although the percentage is already -1 or not -1 the ngIf statement gets ignored.

>   <ion-item-sliding (ionDrag)="dragEvent($event)">
>         <ion-item>
>         <ng-container *ngIf="showIt == true">  
>        <h1>Ionic 2</h1> 
>        <p>Thats an older Ionic Version</p>
>       </ng-container>
>   
>       <ng-container *ngIf="showIt == false">  
>           <h1>Ionic 4</h1> 
>           <p>That's the latest Ionic Version.</p>
>          </ng-container>
>   </ion-item>
>   
>       <ion-item-options side="left">
>          <button ion-button color="secondary">
>          <ion-icon name="md-checkmark"></ion-icon>       
>         </button>
>       </ion-item-options>
>     </ion-item-sliding>

TS

showIt = true;

   dragEvent(item) {
    let percent = item.getSlidingPercent();
    console.log(percent);
    if (percent == -1) {
    this.showIt = false;

    } else {
      this.showIt = true;
    }
   }