3

For example I have a function itemDragged(). How inside that function to get a reference of ion-item-sliding to get its current class attribute?

<ion-item-sliding *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged($event)">
Roman C
  • 49,761
  • 33
  • 66
  • 176
Kin
  • 4,466
  • 13
  • 54
  • 106

3 Answers3

5

You can use reference variable in template

<ion-item-sliding #iis *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged(iis)">
<p>{{iis.class}}</p>
Roman C
  • 49,761
  • 33
  • 66
  • 176
0

Would you use a ViewChild, and get the nativeElement?

In the component API, note that the key is how you will access it in your code, the value passed to ViewChild is the "#" id you gave the component (this is ES6, in TS you'd use the ViewChild annotation):

...
queries { 'myElement' : new ViewChild ( 'myelement' ) }
...

In the markup:

<div #myelement></div>

In your component function (a handler, wherever you need to grab it), the nativeElement property gives you a reference to the HTML element, so you can set innerHTML, add a handler, or whatever else you need to do. There's of course other ways to do this by binding to properties (e.g. you can bind to (click) or [innerHTML]):

...
this.myElement.nativeElement... // etc.
...

Alternatively, if you wanted to use a single handler for multiple elements (say, a bunch of different clickable divs) you could use event.target to do the same thing. The problem with that is, because giving IDs is considered "bad" these days, you have to have an alternative way of IDing which DIV got clicked. You can check the label (innerHTML), you can give it a dummy style and check for that, etc.

Tim Consolazio
  • 4,802
  • 2
  • 19
  • 28
-1

But digging in the event class you can get the class like this

  itemDragged(event){
    console.log(event._elementRef.nativeElement.className);
  }
Victor Godoy
  • 1,642
  • 15
  • 18
  • If the reference begins with an `_` (_elementRef), it typically means that it is used internally and wasn't meant to be used directly. There is no guarantee that any of this structure will be maintained – Greg Jul 20 '17 at 20:30