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

Question

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?

Answer 1

you may try below,

Component HTML

  
    
      {{food.viewValue}}
    
  

  
 Selected value: {{selectedValue}} 

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!!