Cascading Dropdown List in Angular

Create a New Angular Project

ng new cascadingdropdown

Create Json Data

{  "countries":[ {    "id" : 1,    "name":"USA" }, {    "id" : 2,    "name":"Australia" } ] }

ng new cascadingdropdown

Create Services

ng g s Services/dropdownservices.service  --skip-tests

 baseurl = 'assets/data.json';  constructor(private http:HttpClient) { }  getAll():any{    return this.http.get<any>(this.baseurl);  }

Create Component

ng g c dropdown/dropdown –skip-tests

 getall(){    this.dropdwonservice.getAll()      .subscribe((data:any)=>{        this.countries = data,        console.log(this.countries)      })  }

Create Component

ng g c dropdown/dropdown –skip-tests

 getall(){    this.dropdwonservice.getAll()      .subscribe((data:any)=>{        this.countries = data,        console.log(this.countries)      })  }

Create Component

<div>    <label for="country">Country</label>    <div class="input-group input-group-sm mb-3">        <select  [(ngModel)]="selectedvalue.id" (change)="onsubmit($event.target)" class="form-select">            <option value="0">--Select country--</option>            <option *ngFor="let country of countries?.countries" [value]="country.id">{{ country.name }} </option>        </select>    </div>

App Module

imports: [    BrowserModule,    AppRoutingModule,    HttpClientModule,    FormsModule       ],