bind country based city name will comes in options selector

Question

bind based on country options select city name will comes in angular 5 with web api.

 

below added my code,

 
App.component.html

<div>
<mat-form-field>
<mat-select placeholder="Sum Insured Type" [(ngModel)]="InsuredTypes">
<mat-option *ngFor="let InsuredType of myInsuredTypes" [value]="InsuredType.description">
{{InsuredType.description}}
mat-option>
mat-select>
mat-form-field>
<p>{{ selected }}p>
</div>

<div>
<mat-form-field *ngIf="InsuredTypes">
<mat-select placeholder="State" [(ngModel)]="CountryTypes">
<mat-option *ngFor="let myCountryType of myCountryTypes" [value]="myCountryType.description">
{{myCountryType.description}}
mat-option>
mat-select>
mat-form-field>
<p>{{ selected }}p>
</div>

App.component.ts

private map = new Map<string, string[]>([
])
constructor(private httpService: HttpClient){}
myInsuredTypes: string[];
myCountryTypes: string[];
selected = null;

ngOnInit () {
this.httpService.get('http://192.168.1.51/apilinkhere').subscribe(
//this.httpService.get('http://192.168.1.51/masterapi/api/GetCommMaster/GetCountry').subscribe(
getdata => {
this.myInsuredTypes = getdata as string []
// { return Array.from(this.map.keys());};
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
this.httpService.get('http://192.168.1.51/apilinkhere').subscribe(
getdata => {
this.myCountryTypes = getdata as string []
//|| undefined
// { return this.map.get(this.selected);};
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
}

Results are coming like
 

now if i selected other sum insured type state should not comes the values