Mat-select options are not rendering properly

Question

I have the following HTML to display select locations and below that map will be displayed.

I have the following HTML for the above view,

<mat-form-field class="locationSelector">
  <mat-select placeholder="Choose location" (ngModel)="ServiceLocations">
   <mat-option *ngFor="let location of ServiceLocations" [value]="location" style="width:200px; background-color: red; font-size: 10px;">
     {{ location.areaName }}
   </mat-option>
  </mat-select>
 </mat-form-field>
 <div>
   <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
   </agm-map>
  </div>

And corresponding CSS is ,

agm-map {
    height: 300px;
    position: relative;
}

.locationSelector {
    width: 20%;
}

The view I am getting is,

And when I click on select options, I am getting a view as follows,

Please correct me where I am wrong.

All required material components are imported in app.module.ts

Answer 1

Import a theme in your global style.css file.