In ngFor select option how to send the value of particular object property at onChange

Question

<select class="form-control" (change)="onChange(user.id)">
            <option disabled selected="selected">By User</option>
          <option *ngFor="let user of allUsers">{{user.first_name}} {{user.first_name}}</option>
        </select>

The first name and last name is only for displaying what value i need to send to the ts file is user.id

(change)="onChange(user.id) does work because it is outside of the loop. I need to send the value of selected user id on very change.

Answer 1

You need to bind the user.id to the value of the <option> tag:

<select class="form-control" (change)="onChange($event.target.value)">
  <option disabled selected="selected">Invoice By User</option>
  <option *ngFor="let user of allUsers" [value]="user.id">
    {{user.first_name}} {{user.first_name}}
  </option>
</select>

See here for more examples and information

Answer 2

<select class="form-control" formControlName="userInvoice" (change)="onChange()">
  <option disabled selected="selected">Invoice By User</option>
  <option *ngFor="let user of allUsers" [value]="user.id">
    {{user.first_name}} {{user.first_name}}
  </option>
</select>

onChange(){
    console.log(this.userInvoiceformGroup.get('userInvoice').value);
}

Answer 3

Try below:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let user of allUsers">{{user.first_name}} {{user.first_name}}</option>
</select>

And onChange like this

onChange(user) {
    console.log(user);
}