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 ],
Learn more