dropdown list generating country, state, city using ng-select

Question

Hi I am trying to generate a reactive form with dropdown list that shows country state and city. However, State and City dropdown list is disabled until country is selected. Of which once country is selected, states dropdown list will be enabled and states pertaining to that country will be generated in the states dropdown list. (Same applies for State then City).

Qn 1: How do I disable the states and city until country is selected.

Qn 2: How do I bind state and city to the first dropdown list?

Thanks!

Current Code for country dropdownlist

<ng-select [clearable]="false" [items]="country" formControlName="countries" bindLabel="countryName" bindValue="countryCode" class="form-control">
        <ng-template ng-option-tmp let-item="item">
           <span title="{{item.name}}">{{item.name}}</span>
        </ng-template> 
</ng-select>

Answer 1

Try this:

//Country dropdown
<ng-select #countryRef>
    <ng-template ng-option-tmp let-item="item">
        <span title="{{item.name}}">{{item.name}}</span>
   </ng-template> 
</ng-select>


//State dropdown
<ng-select [disabled]=['!countryRef.bindValue']>
    <ng-template ng-option-tmp let-item="item">
          <span title="{{item.name}}">{{item.name}}</span>
    </ng-template> 
</ng-select>

I have removed other attributes of ng-select for the sake of readability.