title: Angular update dropdown list
body: <p>I have a dropdown(region) that defines what should be shown in the next one(city)</p>
  
  <p>Region.ts</p>
  
  <pre><code>    @Component({
    selector: 'app-region-dropdown',
    templateUrl: './region-dropdown.component.html',
    styleUrls: ['./region-dropdown.component.css'],
    providers: [RegionService, CityDropdownComponent]
  })
  export class RegionDropdownComponent implements OnInit {
    regions: Array&lt;Region&gt;;
  
    constructor(private regionsService: RegionService, private cityDropDown: CityDropdownComponent) { }
  
    ngOnInit() {
      this.regionsService.getAll().subscribe(data =&gt; {
        this.regions = data;
      });
    }
  
    public onChange(value):void {
      console.log(value);
      this.cityDropDown.loadList(value);
    }
  
  }
  </code></pre>
  
  <p>City.ts</p>
  
  <pre><code>@Component({
    selector: 'app-city-dropdown',
    templateUrl: './city-dropdown.component.html',
    styleUrls: ['./city-dropdown.component.css'],
    providers: [RegionService]
  })
  export class CityDropdownComponent implements OnInit {
  
    cities: Array&lt;City&gt;;
  
    constructor(private regionsService: RegionService) { }
  
    ngOnInit() {
  
    }
  
    public loadList(regionId: number) {
      this.regionsService.getCities(regionId).subscribe(data =&gt; {
        console.log(data);
        this.cities = data;
      });
    }
  
  }
  </code></pre>
  
  <p>city.html</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-select placeholder="City"&gt;
      &lt;mat-option *ngFor="let city of cities" &gt;
        {{city.name}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>console shows that regionsService returned a list, but the cities list never been updated</p>