Ng5-Dynamic Selectoption - Drop down menu for selecting country then states then district

Ng5-Dynamic Selectoption - Drop down menu for selecting country then states then district
-------------------------------------------------------------------------------------------
template.html
--------------------
  <div>
    <h2>Hello country/ state/ cities </h2>

    <select (change)="countryChange($event)" >
      <option>Select</option>
      <option *ngFor="let c of countries" [ngValue]="c.country">{{ c.country }}</option>
    </select>

    <select (change)="statesChange($event)">
      <option>Select</option>
      <option *ngFor='let state of states' [ngValue]="state.name">{{ state.name }}</option>
    </select>

    <select >
      <option>Select</option>
      <option *ngFor='let city of cities' [ngValue]="city">{{ city }}</option>
    </select>
  </div>

component.ts
--------------- 
 
 countries= [{
"country": "Afghanistan",
      "states": [
                  { "name":"Nurestan", "cities":["c1", "c2", "c3"]  },
                  { "name":"Oruzgan", "cities":["orc1", "oruc2", "oruc3"] },
                  { "name":"Panjshir", "cities":["3c1", "3c2", "3c3"]  }
                ]
    },
    {
"country": "Albania",
"states": [
                  { "name": "Korce" , "cities":["c1", "c2", "c3"] },
                  { "name": "Kukes",  "cities":["orc1", "oruc2", "oruc3"] },
                  { "name": "Lezhe","cities":["orc1", "oruc2", "oruc3"]},
                  { "name": "Shkoder", "cities":["orc1", "oruc2", "oruc3"]},
                  { "name": "Tirane","cities":["orc1", "oruc2", "oruc3"]}
                ]
},
{
"country": "Antarctica",
"states": []
}
]

states= []; cities = [];
countryChange(e){
  console.log(e.target.value)
  this.countries.filter(element => {
if(element.country == e.target.value){
  console.log(element.states[0],"first state")
  this.states = element.states;
}
  });
  this.cities = []
}
statesChange(evt){
  console.log(evt.target.value,this.states)
  this.states.filter( element =>{
if(element.name == evt.target.value){
  this.cities = element.cities;
}
  })
}