CODEWITHSUNDEEP
htmlangulardrop-down-menu
Aquarius_Girl
Aquarius_Girl

Reputation: 22946

How to use click on a dropdown list in angular?

<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?

Upvotes: 0

Views: 549

Answers (2)

dasunse
dasunse

Reputation: 3099

Use this way

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

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

Upvotes: 1

nash11
nash11

Reputation: 8690

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>

Upvotes: 2

Related Questions