bind based on country options select city name will comes in angular 5 with web api.
 
below added my code,
 
App.component.html
  1. <div>  
  2. <mat-form-field>  
  3. <mat-select placeholder="Sum Insured Type" [(ngModel)]="InsuredTypes">  
  4. <mat-option *ngFor="let InsuredType of myInsuredTypes" [value]="InsuredType.description">  
  5. {{InsuredType.description}}  
  6. mat-option>  
  7. mat-select>  
  8. mat-form-field>  
  9. <p>{{ selected }}p>  
  10. div>  
  11.   
  12. <div>  
  13. <mat-form-field *ngIf="InsuredTypes">  
  14. <mat-select placeholder="State" [(ngModel)]="CountryTypes">  
  15. <mat-option *ngFor="let myCountryType of myCountryTypes" [value]="myCountryType.description">  
  16. {{myCountryType.description}}  
  17. mat-option>  
  18. mat-select>  
  19. mat-form-field>  
  20. <p>{{ selected }}p>  
  21. div> 
App.component.ts
  1. private map = new Map<string, string[]>([  
  2. ])  
  3. constructor(private httpService: HttpClient){}  
  4. myInsuredTypes: string[];  
  5. myCountryTypes: string[];  
  6. selected = null;  
  7.   
  8. ngOnInit () {  
  9. this.httpService.get('http://192.168.1.51/apilinkhere').subscribe(  
  10. //this.httpService.get('http://192.168.1.51/masterapi/api/GetCommMaster/GetCountry').subscribe(  
  11. getdata => {  
  12. this.myInsuredTypes = getdata as string []  
  13. // { return Array.from(this.map.keys());};  
  14. },  
  15. (err: HttpErrorResponse) => {  
  16. console.log (err.message);  
  17. }  
  18. );  
  19. this.httpService.get('http://192.168.1.51/apilinkhere').subscribe(  
  20. getdata => {  
  21. this.myCountryTypes = getdata as string []  
  22. //|| undefined  
  23. // { return this.map.get(this.selected);};  
  24. },  
  25. (err: HttpErrorResponse) => {  
  26. console.log (err.message);  
  27. }  
  28. );  
  29. } 
Results are coming like
 

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