Динамический select Angular2

Все крайне просто:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let elem of elements">{{i}}</option>
</select>
onChange(elemValue) {
    console.log(elemValue);
    this.cityService.getCity(elemValue).subscribe(
        (data) => {
            const cityname = data.cityName;
            this.cityService.getStreets(cityname).subscribe(
                (streetData) => {
                    // где streetData твои улицы.
                } (error) => {
                   // error
                }
        } (error) => {
            // error
        }
    )
}

Где elemValue значение select а вместо cityService и getCity подставишь свое значение.

Собственно выглядеть должно примерно так:

<select class="form-control input-sm" [(ngModel)]="selectCountryId" (ngModelChange)="changeCountry($event)">
    <option [ngValue]="undefined" [textContent]="'Ничего не выбрано'"></option>
    <option *ngFor='let country of countries' [ngValue]="country.Id" [textContent]="country.Name"></option>
</select>
<select class="form-control input-sm" [(ngModel)]="selectCityId">
    <option [ngValue]="undefined" [textContent]="'Ничего не выбрано'"></option>
    <option *ngFor='let city of cities' [ngValue]="city.Id" [textContent]="city.Name"></option>
</select>

В контроллере:

changeCountry($event) {
    this.service.getCities(this.selectCountryId)
        .subscribe(result => {
            this.cities = result;
        })
}

Собственно логика следующая. С начала подгружаются данные по умолчанию. Список стран и список городов. Далее, как только происходит выбор страны, вызывается обработчик changeCountry. В нём отправляется запрос на бэк, где происходит фильтрация. Полученный список городов рендирится.