How to pre-select a value in angular2 material design drop down?

Question

I am trying to pre-select a value in dropdowns of angular2 material design. I have done the following but that's not working

<label *ngFor="let service of serviceOptions">
    <b>{{service.serviceName}}</b>
    <br /><br />

      <md-select placeholder="Select Package" [(ngModel)]="service.selectedPackage" formControlName="packageName" size="30">
        <ng-container *ngFor="let package of (reactivePackages | async)"  >
          <md-option *ngIf="service.serviceId==package.serviceId" (click)="selectServicePackage(service, package)">
            {{ package.packageName}}
          </md-option>
        </ng-container>
      </md-select>
    <br />  <br />
  </label>

any help will be appreciated.

Answer 1

Add the value property binding inside <md-option> to assign the selected value to service.selectedPackage . Since you have [(ngModel)]="service.selectedPackage" , its value should match with the binding property of package .

Here's example of binding md-option to package.packageName assuming service.selectedPackage holds similar values.

<md-option [value]="package.packageName" 
           *ngIf="service.serviceId==package.serviceId" 
           (click)="selectServicePackage(service, package)">
  {{ package.packageName}}
</md-option>

Plunker demo