CODEWITHSUNDEEP
angularmaterial-designangular-material2
abdul.badru
abdul.badru

Reputation: 531

How do I set default value on md-select component from angular 2 material design?

I have the following select component that gets populated from a data coming from a rest api. How Can I set default selected value on md-select?

  <md-select
                placeholder= "Warehouse"
                style="width: 100%"
                [(ngModel)]='selectedProductWarehouse.warehouse'
                name="Warehouse"
                required
                #Warehouse="ngModel">
          <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">{{warehouse.description}}</md-option>
        </md-select>

Upvotes: 20

Views: 24618

Answers (3)

Madhu Ranjan
Madhu Ranjan

Reputation: 17894

you may try below,

Component HTML 

  <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
    <md-option *ngFor="let food of foods" [value]="food.value" >
      {{food.viewValue}}
    </md-option>
  </md-select>

  <p> Selected value: {{selectedValue}} </p>

Component script 

@Component({
  selector: 'select-form-example',
  templateUrl: './select-form-example.html',
})
export class SelectFormExample {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];


   // setting this is the key to initial select.
   selectedValue: string = this.foods[0].value;
}

The key here is setting selectedValue with the initial value.

Check this StackBlitz.

Hope this helps!!

Upvotes: 19

abahet
abahet

Reputation: 10623

When you use Objects in md-option value, the object reference of the default value and the correponding option in the options list are not equal.

To fix this, you need to override the default value using the correponding option in the options list before setting the FormGroup.

Check this example

Upvotes: 1

Vidur Singla
Vidur Singla

Reputation: 305

To set default value to md-select you need to set default value to the variable that you are using in [(ngModel)]. In your case:

Component Html =>

<md-select  
            placeholder= "Warehouse" style="width: 100%"
            [(ngModel)]='selectedProductWarehouse.warehouse'
            name="Warehouse"
            required
            #Warehouse="ngModel">
  <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">
            {{warehouse.description}}
 </md-option>
</md-select>

Component Script =>

@Component({
  selector: 'select-form-example',
  templateUrl: './select-form-example.html',
})

constructor() {
  this.selectedProductWarehouse.warehouse = "default value"
}

Upvotes: 1

Related Questions