pass the value attribute into (click) attribute within HTML tag

Question

I have the following HTML template:

<form #topping (change)="updateTopping(topping)">
    <span *ngFor= "let top of toppingOptions">
        {{top.name}} 
        {{top.price.toFixed(2)}}
        <button type="button" value="{{top.name}}-add" (click)="addTopping({{top.name}})">+</button>
        <button type="button" value="{{top.name}}-minus" (click)="minusTopping({{top.name}})">-</button>
        <br>
    </span>    
</form>

As you can probably tell the error occurs in the Button tag. I want to pass "top.name" into addTopping() and minusTopping(), but don't know the correct way of doing so.

Thanks in advance.

Sachila Ranawaka · Accepted Answer · 2017-05-15 17:11:02Z

3

remove the curly brackets and pass the parameter to (click) function

 <button type="button" value="{{top.name}}-add" (click)="addTopping(top.name)">+</button>

answered May 15, 2017 at 17:11

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

4 Comments

noobcoder Over a year ago

Thank you! Say if I wanted to pass in the actual value attribute, how would I do that? So if value="Bacon-add", how would i pass the value attribute directly into my (click)="addTopping(valueAttribute)" parameter?

Sachila Ranawaka Over a year ago

try this (click)="addTopping(top.name + '-add')">

noobcoder Over a year ago

Thank you, I'm new to typescript. I just realized how dumb of a question that was..

Sachila Ranawaka Over a year ago

hehe don't beat yourself up. :D

Collectives™ on Stack Overflow

pass the value attribute into (click) attribute within HTML tag

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related