This is the HTML code I am using to display select locations and a map below it:
Here is the HTML code 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 here is corresponding CSS,
agm-map {
height: 300px;
position: relative;
}
.locationSelector {
width: 20%;
}
The current view looks like this:
https://i.stack.imgur.com/3mdwz.png
When I click on select options, the view changes to:
https://i.stack.imgur.com/DjUMz.png
If there are any corrections needed, please let me know.
All necessary material components have been imported in app.module.ts