How to use click on a dropdown list in angular?

Question

<div>
    <label> Categories </label>
    <select>
        <option *ngFor = "let category of categories"
                [value] = "category" 
                (click) = "onCategorySelected( category.name )">                
                {{category.name}}

        </option>       
    </select>
</div>

That function onCategorySelected is just not getting called.
I have to pass it the user selected value from the dropdown list.
What is the way out?

nash11 · Accepted Answer · 2020-04-02 02:50:41Z

2

The option tag does not support the click event. You can instead make use of the change event on the select tag. You are also assigning an object to the value attribute in the option tag which is incorrect. To assign an object as the value, you need to use ngValue, if not assign a unique id to your value, for eg. [value]="category.id".

Try this instead.

<select (change)="onCategorySelected($event.target.value)">    <!-- If you are using ngModel or formControl, get the value from there instead of using $event.target.value -->
    <option *ngFor="let category of categories" [ngValue]="category">
        {{category.name}}
    </option>
</select>

answered Apr 2, 2020 at 2:50

nash11

8,7503 gold badges23 silver badges58 bronze badges

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

3 Comments

Aquarius_Girl Over a year ago

I am thankful to you. I request you to point the webpage where these events like click and change w.r.t select or anything are listed. I want to see the API. I didn't know about the existence of the change event.

nash11 Over a year ago

@Aquarius_Girl You're welcome. You can check out the mozilla docs on select and option. At the bottom of the page, the events fired by that particular tag are shown. As you can see,option has no events while select has change and input event.

Aquarius_Girl Over a year ago

Thank you again, I am surprised though. We are talking about Angular. Is there no angular's own documentation? Am I supposed to follow simple HTML's docs to know about angular?

dasunse · Accepted Answer · 2020-04-02 02:54:05Z

1

Use this way

<select (change)="selectionChanged($event.target.value)">
    ....
</select>

$event.target.value will send the value of the option you changed

answered Apr 2, 2020 at 2:54

dasunse

3,1791 gold badge17 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to use click on a dropdown list in angular?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related