Getting the Selected Object in Select Option in Angular

Question

I have this array of objects which I put on the select option and I would want to select one list of object in the select option. However I can't get the value of that list of object. It outputs [object] [Object]. I want to get that selected list of object of the corporation. I assigned it to the [value] and it gets [object][Object].

<div class="select" >
    <select class="form-control col-lg-8" #selectedValue (change)="assignCorporationToManage(selectedValue.value)">
        <option *ngFor="let corporation of user_corporations" [value]="corporation">{{corporation.corp_name}}</option>    
    </select>
</div>

ts

assignCorporationToManage(selectedValue) {
     console.log(selectedValue)
}

Chandru · Accepted Answer · 2017-10-03 04:09:26Z

7

Try like this :

add ngModel for your select and use ngModelChange instead of change.

adding ngModel
using ngModelChange instead of change.
using [ngValue] instead of [value].

component.html

<select class="form-control col-lg-8" #selectedValue name="selectedValue" id="selectedValue" [(ngModel)]="selectedValue" (ngModelChange)="assignCorporationToManage($event)">
    <option *ngFor="let corporation of user_corporations" [ngValue]="corporation">{{corporation.corp_name}}</option>
</select>

Component.ts

assignCorporationToManage(selectedValue) {
     console.log(selectedValue)
}

answered Oct 3, 2017 at 4:09

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

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

1 Comment

Joseph Over a year ago

change into this [(ngModel)]="selectedValue[i]"

Mafei · Accepted Answer · 2021-02-26 18:21:32Z

0

you can get that particular object from the list by using selectedValue.

<select class="form-control col-lg-8" #selectedValue name="selectedValue" id="selectedValue" [(ngModel)]="selectedValue">
    <option *ngFor="let corporation of user_corporations" [ngValue]="corporation">{{corporation.corp_name}}</option>
</select>

in your ts or js file,

const selectedObject = this.user_corporations.find((el: any) => {
  return el?.corporation == this.selectedValue;
});

After that, you can use the selectedObject whatever you want.

answered Feb 26, 2021 at 18:21

Mafei

3,9683 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Getting the Selected Object in Select Option in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related