I want to build a cascading dropdown using ng2-select. I am able to get the individual dropdowns to work but when I attempt to place two or more in the same view only the first one works the second one doesn't

```
import { SelectComponent } from "ng2-select/ng2-select";
import { SelectItem } from 'ng2-select/components/select/select-item';
export class AdministrativeStructureComponent implements OnInit, OnDestroy{
  @ViewChild(SelectComponent)
  private selectCountry: SelectComponent;
  private selectTier: SelectComponent;

   //Country
private countryValue: any = {};
private _countryDisabledV: string = '0';
private countryDisabled: boolean = false;
private countryItems: Array<any> = [];

constructor(
    private tierService: TierService,
    private adminStructService: AdministrativeStructureService ,
    private itemsService: ItemsService,
    private notificationService: NotificationService,
    private route: ActivatedRoute) {
    this.administrativeStructure = new AdministrativeStructure();
    this.tier = new Tier();
    this.parentTier = new Tier();
    this.GetCountries();
}
GetTiers(countryID: string) {
    this.tierService.GetTierSelect(countryID)
        .subscribe((res: TierSelectViewModel[]) => {
            this.tiers = res;
            this.tiers.forEach((tier: Tier) => {
               // console.log(tier.TierName + "====================================================================================");
                this.tierItems.push(tier.TierName);
                this.selectTier.itemObjects.push(new SelectItem({ id: tier.TierID, text: tier.TierName }));
            }, error => {
                this.notificationService.printErrorMessage("Failed to Load Tier Information " + error);
                })
        })
}
GetCountries() {
    this.adminStructService.GetCountries()
        .subscribe((res: ICountry[]) => {
            this.countries = res;
            this.countries.forEach((country: ICountry) => {
                //console.log(country.CountryName + "====================================================================================");
                this.countryItems.push(country.CountryName);
                this.selectCountry.itemObjects.push(new SelectItem({ id: country.CountryID, text: country.CountryName }));
            })
        }, error => {
            this.notificationService.printErrorMessage('Failed to load Countries. ' + error);
        });
}
//Tier
private tierValue: any = {};
private _tierDisabledV: string = '0';
private tierDisabled: boolean = false;
private tierItems: Array<any> = [];

private get countryDisabledV(): string {
    return this._countryDisabledV;
}

private set countryDisabledV(countryValue: string) {
    this._countryDisabledV = countryValue;
    this.countryDisabled = this._countryDisabledV === '1';
}

public countrySelected(countryValue: any): void {
    this.GetTiers(countryValue.id);
}

public countryRemoved(countryValue: any): void {
    //console.log('Removed value is: ', value);
}

public countryTyped(countryValue: any): void {
   // console.log('New search input: ', value);
}

public countryRefreshValue(countryValue: any): void {
    this.countryValue = countryValue;
}

//Tier
//Country Drop Down List
private get tierDisabledV(): string {
    return this._tierDisabledV;
}

private set tierDisabledV(tierValue: string) {
    this._countryDisabledV = tierValue;
    this.countryDisabled = this._countryDisabledV === '1';
}

public tierSelected(tierValue: any): void {
    //this.administrativeStructure.Parent = value.id;
    // this.router.navigate([value.id], { relativeTo: this.route });
}

public tierRemoved(tierValue: any): void {
    //console.log('Removed value is: ', value);
}

public tierTyped(tierValue: any): void {
   // console.log('New search input: ', value);
}

public tierRefreshValue(tierValue: any): void {
   // this.value = value;
}
}

```

The code in my view

```
<div class="row">
                     <div class="col-md-4">
                        <!--Single button with keyboard nav-->
                        <div style="width: 300px">
                            <strong>Select Country</strong>
                            <ng-select [allowClear]="true"
                                       [items]="countryItems"
                                       [disabled]="countryDisabled"
                                       (data)="countryRefreshValue($event)"
                                       (selected)="countrySelected($event)"
                                       (removed)="countryRemoved($event)"
                                       (typed)="countryTyped($event)"
                                       placeholder="No Country Selected">
                            </ng-select>

                        </div>
                    </div>
                    <div class="col-md-4">
                        <!--Single button with keyboard nav-->
                        <div style="width: 300px">
                            <strong>Select Tier</strong>
                            <ng-select [allowClear]="true"
                                       [items]="tierItems"
                                       [disabled]="tierDisabled"
                                       (data)="tierRefreshValue($event)"
                                       (selected)="tierSelected($event)"
                                       (removed)="tierRemoved($event)"
                                       (typed)="tierTyped($event)"
                                       placeholder="No Tier Selected">
                            </ng-select>

                        </div>
                    </div>

```

I will appreciate it very much if anyone can provide some samples on how to do this
 Thanks