Trying to return both the value and innerText of Angular select option

Question

Here is an example of my payload

    0: { category: “BRAINS”,
        description: "test 1234124”,
        userNumber: “789456123”,
        accountType: “WOW”,
        balance: {amount: 12.34, currency: “USD”},
        uniqueId: “47823748923hfhjfew32847hw43879=” },
        

1: { category: “DIET”,
        description: "test 1234124”, userNumber: “123456789”,
        accountType: “WOW”,
        balance: {amount: 43.21, currency: “GBP”},
        uniqueId: “47823748923hfhjfew32847hw43879=” },

    2: { category: “MEAT”,
        description: "test 1234124”,
        userNumber: “951234679”,
        accountType: “WOW”,
        balance: {amount: 26.56, currency: “EUR”},
        uniqueId: “47823748923hfhjfew32847hw43879=” },

I want to return both the value and the inner text of the select option,
so both the value ‘uniqueId’ and the inner text ‘userNumber’

My HTML

<select #category="ngModel" name=“user” id=“user” class="form-control" #test [(ngModel)]="model.user” (change)="doSomething(test.value)">
    <option *ngFor="let user of users” [value]=“user.uniqueId”>
       {{user.userNumber}}
    </option>
</select>

My .ts file

doSomething(value) {
      console.log(value); 
      // returns the value 47823748923hfhjfew32847hw43879=
}

    onAddValue() {
          console.log('yoyoyoy', this.model); 
         // returns {value: undefined, uniqueId: "47823748923hfhjfew32847hw43879="}
          console.log('accountNumber', this.model.user); //returns 47823748923hfhjfew32847hw43879=
}

Trying to return both the value and innerText of Angular select option


Basically this is what I want to be able to do



http://jsfiddle.net/5bzkfwrt/

Answer 1

you need to change this:

 (change)="doSomething($event,test.value)"

in .ts

doSomething(event,value) {
      console.log(value); 

}