Display countries, states and cities in different components using routing in angular

I have a json of countries with state and city. I want to display first country list on country component and state list on state component then city on city component with routing.

Please help me how to display data on parent to child (multilevel) in angular 6/7.

JSON Data -

{
"country": [{
"id": 1,
"countryName": "India",
"state": [{
"id": 11,
"stateName": "Andhra Pradesh",
"city": [
"Anantapur",
"Chittoor",
"East Godavari",
"Guntur",
"Krishna",
"Kurnool",
"Nellore",
"Prakasam",
"Srikakulam",
"Visakhapatnam",
"Vizianagaram",
"West Godavari",
"YSR Kadapa"
]
}]
}]


}

Country Component - Here showing country lists, after clicking on list show its particular state afterwards cities.

<ul>
<li *ngFor="let x of country">{{x.countryName}}</li>
</ul>

Continue reading...