I have a button

<button ion-button icon-left name="0x10000011 (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

When I click on it, I want to get the id attribute in my service sendNotify function.

public sendNotify(data) {
  var method = 'SCAN_BUTTON';
  var name = data.target.name;
  var id = data.target.id;
  var value = data.target.value - 0;
  console.log("#$#$%$%^$%^#$%^#$%",method, name, value);
}

Here I am not getting the button id and name. Instead

#$#$%$%^$%^#$%^#$% SCAN_BUTTON undefined NaN.

Can anyone help me to find my error?

I have a button

<button ion-button icon-left name="0x10000011 (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

When I click on it, I want to get the id attribute in my service sendNotify function.

public sendNotify(data) {
  var method = 'SCAN_BUTTON';
  var name = data.target.name;
  var id = data.target.id;
  var value = data.target.value - 0;
  console.log("#$#$%$%^$%^#$%^#$%",method, name, value);
}

Here I am not getting the button id and name. Instead

#$#$%$%^$%^#$%^#$% SCAN_BUTTON undefined NaN.

Can anyone help me to find my error?

• javascript
• angular
• ionic-framework
• ionic2

• why not just send your name/id as parameters of the function? – Suraj Rao Commented May 28, 2017 at 8:58
• check my answer – Suraj Rao Commented May 28, 2017 at 9:19

3 Answers 3

You are considering an ionic ponent ion-button to be a basic html button tag.

It is actually an angular ponent. Check here.

Its inner html looks like:

<span class="button-inner">
  <ng-content></ng-content>
</span>
<div class="button-effect"></div>

depending on where in the button you click it sends the tag's id and name with the event.The click area could be button tag or span.

You should simply send the value as a parameter.

<button ion-button icon-left name="0x10000011" (click)="AppService.sendNotify($event,'0x10000011','0x10000011')" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

A plunker to try

you can get the values using the below code

<button id="ar" name="some" (click)="clicked($event)"> CLICK ME </button>


clicked(event){
    console.log(event.srcElement.id)
    console.log(event.srcElement.name)

  }

LIVE DEMO

Your code looks good in general, I also suggest to use the target instead of the srcElement.

In your code you just miss to close the name attribute, try to change it to this:

<button ion-button icon-left name="0x10000011" (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

I hope this will fix your issue.