this.element.nativeElement is wrong this

Hi all,

Im trying to get the x & y coords of the button in my Ionic View page.
This is my HTML:

<button #data class="drag-button" draggable="true" (click)="show()" data-id="{{ }}" [style.background-color]="btn.kleur">
      {{ btn.artikelnummer }}

But now when I click on the button it send its to my show function in home.ts
That contains the following code:

        console.log('left  ' + event.srcElement.nativeElement.offsetLeft);
        console.log('top  ' + event.srcElement.nativeElement.offsetTop);

At top of my Home.ts I got:

import { Directive, Component, ElementRef, ViewChild } from '@angular/core';

And in my constructor I got:

constructor(private http: Http, private element:ElementRef, public navCtrl: NavController) {

But the problem now is that If I click on the button.
the nativeElement is returning the following:

But it has to be in the first console.log:

<button #data class="drag-button" draggable="true" (click)="show()" data-id="{{ }}" [style.background-color]="btn.kleur">
      {{ btn.artikelnummer }}

And beside of that I’m not receiving any offsetLeft / Top coords.

I hope some one can help me out.

Thanks in advance.

I solved it with another method.

I install the jQuery library for Ionic and did it like this:


<button class="drag-button" draggable="true" (click)="show($event)" data-id="btn{{ }}" [style.background-color]="btn.kleur">
     {{ btn.artikelnummer }}

At top I included

import * as $ from 'jquery'

And my function


     let value = event.srcElement['attributes']['id']['value'];

     var pos = $('#'+value).offset();

Just use ngDraggable
Why to use jQuery when you have so simple clean language