I am using Angular 7 and Angular Material. I want my to have a default value, but it is not working as expected.

 <mat-select required [(value)]="userProfile.gender">
    <mat-option value="Male">Male</mat-option>
    <mat-option value="Female">Female</mat-option>
  </mat-select>

userProfile does have a property and the value is Male in my test case, but nothing is being selected in the html. What am I doing wrong?

I am using Angular 7 and Angular Material. I want my to have a default value, but it is not working as expected.

 <mat-select required [(value)]="userProfile.gender">
    <mat-option value="Male">Male</mat-option>
    <mat-option value="Female">Female</mat-option>
  </mat-select>

userProfile does have a property and the value is Male in my test case, but nothing is being selected in the html. What am I doing wrong?

• javascript
• angular
• angular-material

• Can you post the typescript code ? – Niladri Commented Jan 2, 2019 at 17:21

1 Answer 1

I don't know why, but changing [(value)] to [(ngModel)] solved it

  <mat-select required [(ngModel)]="userProfile.gender">
    <mat-option value="Male">Male</mat-option>
    <mat-option value="Female">Female</mat-option>
  </mat-select>