Using "this" with html button "(click)"

#1

i have an html file that looks like this:
<button id="0" (click)="Check(this.id)" > I am a button </button>

and then i have a ts file with a page that has the Check function that looks like this:
Check(bID)
{
alert("Button ID: " + bID);
}

however the alert output is “Button ID: undefined” but i want the alert to display “Button ID: 0”

It’s super simple code not much to go wrong so I’m assuming I’m having some fundamental misunderstanding of how the way Angular works or the way Ionic works and i was hoping you guys help me out.

#2

Why “this”?

If in your component you have a variable called “id”, angular will bind it properly. “this” doesn"t mean anything in the “view”.

Yes I think you have a misunderstanding… it is a lot easier!!

#3

“this” scopes to your class member variables, so the part you’re missing is

`private id: number;`

…in your *.ts file.

Here’s the full solution:

HTML

`<button ion-button (click)="DoSomething(this._id)">Hello I'm {{ _id }}!</button>`

(you were missing the “ion-button” attribute as well)

TS

export class HomePage {

    private _id: number;

    constructor(public navCtrl: NavController) {
        this._id = 99;
    }

    DoSomething(id: number) {
        console.log('id = ' + id);
    }
}
#4

btw, mine shows you the actual solution of your code’s missing private variable, but @Sulot’s answer is what you should use. :slight_smile:

#5

The id property cannot be private. That will break when ngc gets involved (i.e. production builds).

#6

it’s a generic number called ‘id’ … in my code, it’s correctly called ‘_id’.

:slight_smile:

#7

I don’t care what you name it: any properties that are accessed by templates must be public.

#8

You shouldn’t call it “_id”. As a naming convention it is often used for _service, for example. (But you can, nothing wrong in it)

<button ion-button (click)="DoSomething(homePageId)">Hello I'm {{ homePageId }}!</button>

export class HomePage {

    public homePageId: number;

    constructor(public navCtrl: NavController) {
        this._id = 99;
    }

    DoSomething(id: number) {
        console.log('homePageId  ' + id);
    }
}
#9

…it works. just try it out…

#10

No, it doesn’t work.

#11

then update your IDE :slight_smile:

#12

No way did you read that entire thread that quickly.

#13

No offense, but please try to be productive. I’m just trying to help someone here with a coding issue. I’m not following this thread any longer. No one needs to read all this. If you want to discuss further, just IM me.

Ryan

#14

but what if i had multiple buttons and i wanted my function to do separate things based on the id of the button pressed…
if(bID == 2)
//do something
else if(bID == 0)
//do something else

#15

If you’re not generating these buttons via ngFor, it would seem much more readable to just have them have different click handlers.

If you are generating them via ngFor, then you can do something like this:

<template ngFor let-foo="$implicit" let-i="index" [ngForOf]="foos">
  <button (click)="onFooClick(i)">{{foo}}</button>
</template>
#16

Ah ha! Now you’re seeing why my code only solved your immediate bug.

To address multiple buttons (or any other items in multiples), here’s what I like to do…

HTML

<ion-card *ngFor="let robot of _robots; let itemNum = index;">
        <ion-card-content>
            {{ robot.name }}, {{ robot.age }}
            <br />
            <button ion-button item-right (click)="DoSomething(itemNum)">Use {{ robot.name }}</button>
        </ion-card-content>
    </ion-card>

TS

export class HomePage {

    private _robots : any[];

    constructor(public navCtrl: NavController) {
        this._robots = [{name:'Bender', age: 4},
                        {name:'K9', age: 20},
                        {name:'Rosie', age: 50},
                        {name:'Wall-e', age: 1000}];
    }

    DoSomething(id: number) {
        console.log('id = ' + id);
        let selectedRobot = this._robots[id];
        console.log('robot name: ' + selectedRobot.name + ', robot age: ' + selectedRobot.age);
    }
}

You’ll see that the HTML has “let itemNum = index;” which acts as your id field.

#17

That seems like a decent way of getting this done. thanks

#18

Oh wait what if i wanted to do something like disable the button that was pressed? How would i reference the pressed button to set disabled?

#19

One way:

<button (click)="onFooClick(foo)" [disabled]="foo.disabled">

onFooClick(foo: Foo): void {
  if (condition) {
    foo.disabled = true;
  }
}
#20