Pass button value to function in component

Question

I have a button that gets its value and text dynamically from a component. Upon click of the button, I would like to pass the value to a function in the component.

<button class="btn btn-sm btn-primary" 
value="{{ actionButton.value }}"
(click)="doSomething()">{{ actionButton.text }}</button>

doSomething() {

//Get value from the button clicked.
//Do something with it.

}

Is there a way to pass the event?

(click)="doSomething(actionButton.value)"?

jonrsharpe
– jonrsharpe

2019-03-07 19:13:33 +00:00
Commented Mar 7, 2019 at 19:13 — jonrsharpe
– jonrsharpe, Commented Mar 7, 2019 at 19:13

Igor · Accepted Answer · 2019-03-07 19:17:47Z

1

You can pass parameters to your methods.

<button class="btn btn-sm btn-primary" 
    value="{{ actionButton.value }}"
    (click)="doSomething(actionButton)">{{ actionButton.text }}</button>

doSomething(actionButton: {value: any}) {
  console.log(actionButton.value);
}

answered Mar 7, 2019 at 19:17

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mzaleski · Accepted Answer · 2019-03-07 19:44:37Z

0

So...

currentComponent.component.ts has public actionButton: {} ?

currentComponent.component.html has <button (click)="doSomething()"></button> ?

if currentComponent is your component & is not in an *ngFor loop then why would you pass actionButton.value to the DOM to give it back to the component as argument?

You could simply do doSomething(): void { // do something with actionButton.value }

If actionButton is given to you via @Input() the logic remains the same.

answered Mar 7, 2019 at 19:44

mzaleski

235 bronze badges

3 Comments

Jake Over a year ago

The button generation is in a *ngFor loop

mzaleski Over a year ago

My bad. doSomething(value: typeOfYourValue): void {} and in html: doSomething(actionButton.value)

mzaleski Over a year ago

Assuming *ngFor="let actionButton of actionButtons" And.. you can attribute bind over string interpolation with [value]=actionButton.value over value = {{actionButton.value}}

Collectives™ on Stack Overflow

Pass button value to function in component

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related