How to pass variables from select option to TypeScript function at Angular?

Question

select-option loop at myComponent.html:

      <select class="form-select" (change)="selectOption($event)">
        <option *ngFor="let entity of entities; let i = index"
          value="{{entity.id}}" [selected]="i == 0 ? true : null" 
          (onload)="fooFunction(i, entity.id)">{{entity.name}}
        </option>
      </select>

and myComponent.ts function:

  fooFunction(i: number, entityId: number){
    console.log(`${i} - ${entityId}`);
  }

I want to pass variables to function while populating options. I tried load , onload , onSelect etc.

How can I achieve this in angular13?

Answer 1

Your selectOption($event) could reflect that by passing your variables in an array on change.

In TS

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  entities = [
    { id: 1, name: 'hello' },
    { id: 2, name: 'test' },
  ];

  selectOption(event: any) {
    const arr = event.target.value.split(',');
    console.log(arr[0]); //id
    console.log(arr[1]); //index
  }
}

Html

<select class="form-select" (change)="selectOption($event)">
  <option *ngFor="let entity of entities; let i = index" [value]="[entity.id, i]">
    {{ entity.name }}
  </option>
</select>

Working example: https://stackblitz.com/edit/angular-ivy-qzdsfl?file=src%2Fapp%2Fapp.component.ts

Answer 2

You have to use ngModel

 <select class="form-select"  [(ngModel)]="selectedValue">
        <option *ngFor="let entity of entities; let i = index"
          [ngValue]="entity.id">{{entity.name}}
        </option>
 </select>