CODEWITHSUNDEEP
angulartypescriptangular7
Gregory Mazur
Gregory Mazur

Reputation: 2468

Angular update dropdown list

I have a dropdown(region) that defines what should be shown in the next one(city)

Region.ts

    @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<Region>;

  constructor(private regionsService: RegionService, private cityDropDown: CityDropdownComponent) { }

  ngOnInit() {
    this.regionsService.getAll().subscribe(data => {
      this.regions = data;
    });
  }

  public onChange(value):void {
    console.log(value);
    this.cityDropDown.loadList(value);
  }

}

City.ts

@Component({
  selector: 'app-city-dropdown',
  templateUrl: './city-dropdown.component.html',
  styleUrls: ['./city-dropdown.component.css'],
  providers: [RegionService]
})
export class CityDropdownComponent implements OnInit {

  cities: Array<City>;

  constructor(private regionsService: RegionService) { }

  ngOnInit() {

  }

  public loadList(regionId: number) {
    this.regionsService.getCities(regionId).subscribe(data => {
      console.log(data);
      this.cities = data;
    });
  }

}

city.html

<mat-form-field>
  <mat-select placeholder="City">
    <mat-option *ngFor="let city of cities" >
      {{city.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

console shows that regionsService returned a list, but the cities list never been updated

Upvotes: 0

Views: 3750

Answers (1)

Snorre
Snorre

Reputation: 954

I probably need to see your whole project to find out what is wrong, but I have made something similar on this stackblitz:

https://stackblitz.com/edit/angular-7-master-wuuknx

It works.

Upvotes: 1

Related Questions