Get id and value from selected Dropdown

Question

i need id and value from selected dropdown. i tried things but not getting id, only value is coming. how do i get both id and value?

below is my code

.html

<div class="form-group">
                            <label>Item</label>
                            <select id='itemCode' name="" class="form-control">
                                <option value="" disabled selected>Choose Item</option>
                                <option *ngFor="let itemValue of itemslistvalue"
                                    [ngValue]="{id: itemValue.itemCode, name: itemValue.itemName}">
                                    {{itemValue.itemName}}
                                </option>
                            </select>
</div>
<div class="form-group"><br>
    <button type="button" (click)="add()" style=" margin-left:10px;"></button>
 </div>

.TS

add() {
    var itemName = (<HTMLInputElement>document.getElementById('')).value;
    var itemCode = (<HTMLInputElement>document.getElementById('')).value;
    
    if (itemName !== null && itemName !== '' && itemCode !== null && itemCode !== '') {
        this.newDynamic = { itemCode: itemCode, ItemName: itemName };
        console.log(this.newDynamic);
        this.dynamicArray.push(this.newDynamic);            
        return true;
    }
}

Answer 1

.Html

<div class="form-group">
                        <label>Item</label>
                        <select id='itemCode' name="" class="form-control">
                            <option value="" disabled selected>Choose Item</option>
                            <option *ngFor="let itemValue of itemslistvalue"
                                [ngValue]="{{{itemValue | json}}}">
                                {{itemValue.itemName}}
                            </option>
                        </select>

.Ts

add() {
    var itemName = (<HTMLInputElement>document.getElementById('itemCode')).value;
    console.log(itemName);
    let myObj = JSON.parse(itemName);
    itemCode = myObj.itemCode;
    itemName = myObj.itemName;}

Answer 2

just use a variable and ngModel

//In .ts
item:any=null;

<select id='itemCode' [(ngModel)]="item" name="" class="form-control">
  <!--see that by defect is [ngValue]="null"-->
  <option [ngValue]="null" disabled hidden>Choose Item</option>
   ...
</select>

And you has stored in item the value

You can call to change if it's necesary separate the [(ngModel)]

<select id='itemCode' [ngModel]="item" 
   (ngModelChange)="item=$event;doSomething($event)" name="" class="form-control">
   ...
</select>

//in your .ts
doSomething(item:any){
    console.log(item);
}

If you don't want store the variable, use a template reference

<select #itemId id='itemCode' (change)="doSomething(itemId.value)"
  name="" class="form-control">
   ...
</select>

If you use a template reference variable, you only can get the "value" of the select (in this case only the name)

<select #itemId id='itemCode' (change)="doSomething(itemId.value)"
  name="" class="form-control">
   ...
</select>

doSomething(item:string){
    console.log(item); //<--it's only the "name"
}

a stackblitz

the referecences:

1. about ngModel
2. about template reference variables

Update if we want to add a new element to the array, we declare two variables

newItemName:string=null;
newItemCode:string=null;

And in our .html

<input [(ngModel)]="newItemName">
<input [(ngModel)]="newItemName">

<button (click)="add()">Add</button>

Before the funciton add we need take account that when we use a select with store an object. WE can take two approach

1.-use a function compare, is only write some like

compareFn(a,b){
  return !a && !b ||(a && b && a.itemCode==b.itemCode)
}

//or in abreviate mode:
compareFn=(a,b)=>!a && !b ||(a && b && a.itemCode==b.itemCode)

And in .html our select like:

<select [(ngModel)]="item" .. [compareWith]="compareFn">

2.- use the own elements of the array

<option *ngFor="let itemValue of itemslistvalue"
    [ngValue]="itemValue">
    {{itemValue.itemName}}
</option>

But in this case we need equal to an object of an array, e.g.

item=itemslistvalue[2]

Well, our function add, can use the values of the variables. this is the significance of two-binding-way, the value of the variable is in the input, when change the input the variable change

  add() {
    //see that inside a function you use "this"

    if (this.newItemName && this.newItemCode) {
      //if only want to add value if there no selecte any thing
      //replace by
      //    if (this.newItemName && this.newItemCode && !this.item ) {..}

      //try to find one with the same code    
      const item = this.itemslistvalue.find(
        x => x.itemCode == +this.newItemCode
      );
      if (!item) { //if not find
        //add
        this.itemslistvalue.push({
          itemCode: +this.newItemCode,
          itemName: this.newItemName
        });

        //if we want that the select gets the value added
        this.item = this.itemslistvalue[this.itemslistvalue.length - 1];
      } else {
        this.item = item; //just equal the element found
      }
    }
  }