CODEWITHSUNDEEP
javascriptangularionic-frameworkionic2
Nidhin
Nidhin

Reputation: 167

How to get id and name value of button on click event in ionic 2 angular 2

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?

Upvotes: 3

Views: 11346

Answers (3)

Suraj Rao
Suraj Rao

Reputation: 29624

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

It is actually an angular component. 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

Upvotes: 3

Ratan
Ratan

Reputation: 619

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.

Upvotes: 0

Aravind
Aravind

Reputation: 41571

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

Upvotes: 3

Related Questions