CODEWITHSUNDEEP
angular
Sivvio
Sivvio

Reputation: 297

angular 4: multiple values for option tag

is there a way of passing multiple variables in the "value" field of my html? I would need (for instance) 

value = {{option.formula and option.option}}. //whatever syntax that would be if even possible

This is what I have so far

<select class="form-control" required formControlName="high_availability">
    <option *ngFor="let option of arr" value={{option.formula}} [disabled]="option.disabled"> {{option.option}} </option>
</select>

thanks in advance.

Upvotes: 0

Views: 5713

Answers (3)

Mausam
Mausam

Reputation: 409

Please try this as I thought the code would be visible better here then comment above. I am using Angular Material but the logic is same.

View

<mat-form-field>
 <mat-select (selectionChange)="doSomething($event)"> 
  <mat-option *ngFor="option of arr" [value]="option">
   {{ option.option }}
  </mat-option>
 </mat-select>
</mat-form-field>

Component

doSomething(event) {
  let mySelectedOption: any = event.source.value
  console.log(mySelectedOption)
}

Upvotes: 0

Avinash
Avinash

Reputation: 1243

Try this, it should work if your intended output is value = {{option.formula and option.option}}

<select class="form-control" required formControlName="high_availability">
    <option *ngFor="let option of arr" 
            value="{{option.formula}} and {{option.option}}"
           [disabled]="option.disabled"> {{option.option}} </option>
</select>

Upvotes: 3

Woohoojin
Woohoojin

Reputation: 724

Put the loop outside of your option definition.

<select class="form-control" required formControlName="high_availability">
    <ng-contianer *ngFor="let option of arr">
        <option value={{option.formula}} [disabled]="option.disabled"> {{option.option}} </option>
    </ng-container>
</select>

Upvotes: 0

Related Questions