angular 4: multiple values for option tag

angular select
angular 4 select options example
mat-select set value programmatically
ng-select selected value
angular multi select
ng-select (change event angular 6)
angular 6 select option selected value
angular 6 select options example

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>

thanks in advance.

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>

Angular 2 Select Option + Multiple Select Option + Validation , <mat-select> is a form control for selecting a value from a set of options, similar to Using multiple selection with a native select element ( <select multiple> ) is  This page will walk through Angular select option + multiple select option + validation example using Reactive Form. We will provide end to end demo for how to populate select option and multiple select options. In Angular select element, the value attribute of <option> element can bind an object using property binding.

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>

Select, Angular Bootstrap Multiselect is a component that allows users to tick multiple options from a collapsible list of values. Can be  1.4. Set Default Value with 'selected' Attribute We can also use 'selected' attribute in <option> tag of select element to set default value selected in select box.

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.


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


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

Angular Multiselect, Angular ng-select - All in One UI Select, Multiselect and Autocomplete. >=9.0.0 <10.0.0, v4.x. >=8.0.0 <9.0.0, v3.x. >=6.0.0 Custom option, label, header and footer templates Eg : <ng-select bindValue="some-new-value"></ng-select> [​multiple], boolean, false, no, Allows to select multiple items. In Angular select element, the value attribute of <option> element can bind an object using property binding and one field of the object can be used to display items. For validation of select element, we need to use validation attribute such as required.

@ng-select/ng-select, configuration option. The placeholder value will be displayed until a selection is made. For multi-selects, you must not have an empty <option> element:. I'm having trouble creating a select in Angular2 that is backed by an array of Objects instead of strings. I knew how to do it in AngularJS using ngOptions, but it doesn't seem to work in Angular2 (I'm using alpha 42).

Placeholders, Optionally, a single hard-coded <option> element, with the value set to an the expression contains a track by clause or the the select has the multiple attribute. Angular Select - Bootstrap 4 & Material Design. Angular Bootstrap select is a component that displays a collapsable list of multiple values which can be used in forms, menus or surveys. MDB provides you a variety of options and variations.

ngOptions, A drop-down list that allows multiple selections: <label for="cars">Choose a car:<​/label> <select id="cars" multiple> <option value="volvo">Volvo</option> Customizing option selectionlink. Angular uses object identity to select option. It's possible for the identities of items to change while the data does not. This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run.

  • not sure if this would work but what if you made value={{[option.formula, option.option]}}
  • Do you want to concatenate them in value field?
  • @Farasi78 yeah, that what the first thing I tried.
  • @Mausam yeah, I don't care they way they are sent to the logic behind, as long as I have both values I can work on.
  • Seems to work - check this out: (alert is the value) is the code so you can see.
  • this is the correct answer. Although the and is not needed. Cheers pal
  • I don't see how this helps with my issue?