Filter Data By Chaining Ng-Select(s)

Question

I have a list of states (U.S. State) and counties that I need to filter and display the values. For simplicity's sake, I thought to chain ng-selects would be the simplest UI. However, I'm having trouble loading the selected state's respective counties in the second ng-select. Where am I going off track? Thanks in advance..

template:

    <div class="col">
        <p>State {{selectedState}}</p>
        <ng-select 
           [items]="states" 
           bindLabel="state" 
           bindValue="state" 
           [(ngModel)]="selectedState">
        </ng-select>
    </div>
    <div class="col" *ngIf="selectedState">
        <p>County {{selectedCounty}}</p>
        <ng-select 
           [items]="selectedState.counties" 
           bindLabel="selectedState.counties.name" 
           bindValue="selectedStatecounties.name"
           [(ngModel)]="selectedCounty">
        </ng-select>
    </div>

Lists:

states = [
        {
            state: "Alabama",
            counties:  [{
                name: "Alabama1"
              },
              {
                name: "Alabama2"
                          }]
          },
        {
          state: "Alaska",

          counties:  [{
                name: "Alaska1"
              },
              {
                name: "Alaska2"
                          }]
        },

Answer 1

Stackblitz: https://stackblitz.com/edit/ng-select-ymus3e

Try the below:

app.component.ts:

import {Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule, FormsModule} from '@angular/forms';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';

@Component({
    selector: 'my-app',
    template: `
          <div class="col">
        <p>State {{selectedState}}</p>
        <ng-select 
           [items]="states" 
           bindLabel="state" 
           bindValue="state"
           (change)="stateChanged($event)"
           [(ngModel)]="selectedState">
        </ng-select>
    </div>
    <div class="col" *ngIf="selectedState">
        <p>County {{selectedCounty}}</p>
        <ng-select 
           [items]="availableCounties" 
           bindLabel="name" 
           bindValue="name"
           [(ngModel)]="selectedCounty">
        </ng-select>
    </div>
`
})
export class AppComponent {

    states = [
        {
            state: "Alabama",
            counties:  [{
                name: "Alabama1"
              },
              {
                name: "Alabama2"
                          }]
          },
        {
          state: "Alaska",

          counties:  [{
                name: "Alaska1"
              },
              {
                name: "Alaska2"
                          }]
        }
    ]

    selectedState: any;
    availableCounties: any;
    selectedCounty: any;

    constructor() {

    }

    stateChanged(event) {      
      this.selectedCounty = undefined;
      this.availableCounties = event.counties;
    }
}