How to get current element?

Ionic Framework ionic-v3
1

For example I have function itemDragged. How inside that function get reference to the ion-item-sliding to get its current classes?

<ion-item-sliding *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged($event)">

2

What’s the specific usecase?

3

I need to toggle icon like open/close inside the sliding item:

<ion-item>
	<ion-icon [name]="activity.options ? 'arrow-dropright' : 'arrow-dropleft'" style="float:right"></ion-icon>
	<!-- <ion-icon name="swap" style="float:right"></ion-icon> -->
	<h2>{{ activity['Event type'] }}</h2>
</ion-item>
4

So if I understand you correct, you have a sliding item. If you slide it to the left side you want to show something inside the initial item? Because you also have ion-item-options to display an action button the side of sliding items.

5

Yes, correct. I want to show arrow in which direction you need to slide

6

aah okay. But that could be solved easier then catching the entire event I suppose. Just add the icons in place inside your ion-item. Then hide them through css.

If you look at the HTML of the opened sliding-item, you notice these specific classes:
item-wrapper active-slide active-options-right

So, on the top level you have active-options-right (if sliding-item is opened on the right side), and active-options-left (if sliding-item is opened on the left side). Just change the display property inside the item for the corresponding icon.

If you don’t want to use options but just detect if an item is sliding at all, you could use the classes active-swipe-left and active-swipe-right.

7

Can you provide an example? I’m quite new to Ionic and Angular and stuck at this for last 4 hours…

8

Something like this:

   <ion-item-sliding class="sliding-item--custom">      
      <ion-item>
          <span>
             <ion-icon class="icon-left" name="arrow-left"></ion-icon>
             <ion-icon class="icon-right" name="arrow-right"></ion-icon>
          </span>
        </ion-item>
    <ion-item-options side="left" >
      <button ion-button>
        <ion-icon name="something"></ion-icon>
      </button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button>
        <ion-icon name="heart"></ion-icon>
      </button>
    </ion-item-options> 
   </ion-item-sliding>

Then in your css:

.sliding-item--custom {
 .icon-left { display: none; }
 .icon-right { display: none; }
&.active-options-right, &.active-options-left {
  .icon-left { display: inline-block; }
  .icon-right { display: inline-block; }
}
}
9

But still is it possible to do it programmatically avoiding two elements of icons?

10

Didn’t work… Show two icons or none in the same time.

11

Off course. but if you do it in only 1 place it shouldn’t be a problem to use two icons I suppose.

Use the code out of the example to determine which side the item is opened with and set the name of the icon from your code.

itemDragged(item) {
  let percent = item.getSlidingPercent();
  if (percent > 0) {
    // positive
    console.log('right side');
    this.icon_name = 'arrow-forward';
  } else {
    // negative
    console.log('left side');
   this.icon_name = 'arrow-back'
  }
}

Then this is our HTML:

<ion-item>
	<ion-icon [name]="icon_name"></ion-icon>
	<h2>{{ activity['Event type'] }}</h2>
</ion-item>
12

Sorry, made a typo. I didn’t test it out.

 &.active-options-right, &.active-options-left {
  .icon-left { display: inline-block; }
  .icon-right { display: inline-block; }
}

should off course be:

.sliding-item--custom {
  .icon-left, .icon-right {
    display: none;
  }
 &.active-options-left {
  .icon-left { display: inline-block; }
}

  &.active-options-right {
    .icon-right { display: inline-block; }
  }
}
13

I already tried this and this does not work because it doesn’t return 0. In the end it return 0.2, 0,001 and etc, but not 0. So after first drag it > 0

Also using this will change icons to all the list. Not to the specific item.

14

in this case there is delay when it changes the styles…

15

This is all stuff unrelated to angular, basic javascript. Just pass the index of the item to toggle it on the specific item if needed so. Also, I just tried it out with a small example and works exactly as expected. If I swipe to one side, the icon get’s toggled. If I swipe to the other side, the icon get’s toggled again. If you want to do this for the specific item just pass the item’s index in the function as well and use it in your advantage (look index on ngfor up over here: link.

That’s all I can do for you know I’m afraid.