Unable to bind the dynamic data into Angular Material select form I am unable to display the data dynamically with Angular Material select form using Angular8. My code is below.
product.componet.html:
<form [formGroup]="productForm" (submit)="saveProduct($event)" novalidate> 

    <mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
<mat-label>Product Name</mat-label>
<input matInput placeholder="Product Name" aria-label="Product Name" formControlName="Name" maxlength="70" required>
    </mat-form-field>
   <mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
<mat-label>Gender</mat-label>
<mat-select
placeholder="Select Gender" 
aria-label="Select Gender" 
(selectionChange)="onGenderSelectionChanged($event)"
>
<mat-option *ngFor="let s of genders" [value]="s.Code">
<span *ngIf="!s.Code">
</span>
<span *ngIf="s.Code">
{{s.Name}}
</span>
</mat-option>
</mat-select>
</mat-form-field>

</form>

Product.componet.ts:
genders: any = [
    '',
    {
      Code: "M",
      Name: "Male"
    },
    {
      Code: "F",
      Name: "Female"
    },
    {
      Code: "U",
      Name: "Unisex"
    }
  ];
this.productForm.setValue({
     Name : String = 'Test product',
     Gender: String = 'M(Male)'
})

I am able to display the product name but unable to display that drop down value which is binding dynamically. I need to display the drop down value dynamically using Angular 8.

There are few things which is wrong in the posted code:


*

*You must use the formControlName for the gender control for the <mat-select> control:


Ex:
Here
\/\/\/\/\/\/
<mat-select formControlName="Gender" placeholder="Select Gender" aria-label="Select Gender" (selectionChange)="onGenderSelectionChanged($event)">
  <mat-option *ngFor="let s of genders" [value]="s.Code">
     <span *ngIf="!s.Code"></span>
     <span *ngIf="s.Code"> {{s.Name}}</span>
  </mat-option>
</mat-select>



*While setting value for the FormGroup not need to specify the datatype and,


this.productForm.setValue({
  Name : 'Test product',
  Gender: 'M'
});  

Not M(Male) which is totally diff. from M, which you are using to bind the value of matselect.
Working_Demo

Instead of checking try using to set the value as "" 
<span>
   {{s.Name}}
</span>


And your array as
genders: any = [
    {
      Code: "",
      Name: ""
    },
    {
      Code: "M",
      Name: "Male"
    },
    {
      Code: "F",
      Name: "Female"
    },
    {
      Code: "U",
      Name: "Unisex"
    }
  ];

Setting the mat select value 
<mat-select placeholder="Select Gender" aria-label="Select Gender"  (selectionChange)="onGenderSelectionChanged($event)" formControlName="Gender">
 <mat-option *ngFor="let s of genders" [value]="s.Code">
     <span *ngIf="!s.Code"></span>
     <span *ngIf="s.Code">
       {{s.Name}}
     </span>
 </mat-option>
</mat-select>

Add the formControlName to the mat select tag
formControlName="Gender"