title: mat-select inside a dialog not selecting properly
body: <p>I'm trying to implement a functionality where the user is prompted a dialog where he's asked to selected a value from a drop-down menu and confirm his choice with an "OK" button. I'm using Angular Material to achieve this. But I have a problem with the mat-select inside the dialog as it does not show or return the selected option.</p>
  
  <p>Here's my dialog HTML code</p>
  
  <pre><code>&lt;h1 mat-dialog-title&gt;Saving choice ... &lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
    &lt;p&gt;Please selected an option&lt;/p&gt;
    &lt;mat-form-field&gt;
    &lt;mat-select placeholder="Which option?" [(ngModel)]="selectedChoice" &gt;
    &lt;mat-option&gt;None&lt;/mat-option&gt;
    &lt;mat-option *ngFor="let opt of data.options"&gt;{{opt.name}}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
   &lt;/mat-form-field&gt;
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
   &lt;button mat-button (click)="onNoClick()" &gt;Back&lt;/button&gt;
   &lt;button mat-button (click)="confirmSelection()" cdkFocusInitial &gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the Component ts code :</p>
  
  <pre><code>export class SaveChoiceDialog {
  
     selectedChoice : string;
  
     constructor(
       public dialogRef: MatDialogRef&lt;SaveChoiceDialog&gt;,
       @Inject(MAT_DIALOG_DATA) public data: { options : Option[]}) {}
  
  
     onNoClick(): void {
       this.dialogRef.close();
      }
  
     confirmSelection(): void {
       this.dialogRef.close(this.selectedChoice)
      }
  
   }
  </code></pre>
  
  <p>So my problem is when I click on the drop-down menu and click on an option it does not show and I the placeholder does not change to the selected value.</p>
  
  <p>I tried following the angular doc and <a href="https://alligator.io/angular/dialogs-angular-material/" rel="nofollow noreferrer">this tutorial</a> but it doesnt seem to work for me... what am I doing wrong please ?</p>