Cascading in Angular Drop down list component

23 Jan 20249 minutes to read

The cascading DropDownList is a series of DropDownList, where the value of one DropDownList depends upon another’s value. This can be configured by using the change event of the parent DropDownList. Within that change event handler, data has to be loaded to the child DropDownList based on the selected value of the parent DropDownList.

To get started quickly with cascading in angular DropDownList component, you can check the video below.

The following example, shows the cascade behavior of country, state, and city
DropDownList. Here, the dataBind method is used to reflect the property changes immediately to the DropDownList.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { Query, DataManager } from '@syncfusion/ej2-data';

@Component({
    selector: 'app-root',
    // specifies the template path for DropDownList component
    templateUrl: `cascading.html`
})
export class AppComponent {
    constructor() {
    }
    //define the country DropDownList data
    public countryData: { [key: string]: Object }[] = [
        { CountryName: 'Australia', CountryId: '2' },
        { CountryName: 'United States', CountryId: '1' }
    ];
    //define the state DropDownList data
    public stateData: { [key: string]: Object }[] = [
        { StateName: 'New York', CountryId: '1', SateId: '101' },
        { StateName: 'Virginia ', CountryId: '1', SateId: '102' },
        { StateName: 'Tasmania ', CountryId: '2', SateId: '105' }
    ];
    //define the city DropDownList data
    public cityData: { [key: string]: Object }[] = [
        { CityName: 'Albany', SateId: '101', CityId: 201 },
        { CityName: 'Beacon ', SateId: '101', CityId: 202 },
        { CityName: 'Emporia', SateId: '102', CityId: 206 },
        { CityName: 'Hampton ', SateId: '102', CityId: 205 },
        { CityName: 'Hobart', SateId: '105', CityId: 213 },
        { CityName: 'Launceston ', SateId: '105', CityId: 214 }
    ];
    // maps the appropriate column to fields property for country DropDownList
    public countryFields: Object = { text: 'CountryName', value: 'CountryId' };
    // maps the appropriate column to fields property for state DropDownList
    public stateFields: Object = { text: 'StateName', value: 'SateId' };
    // maps the appropriate column to fields property for city DropDownList
    public cityFields: Object = { text: 'CityName', value: 'CityId' };
    //set the placeholder to country DropDownList input
    public countryWatermark: string = "Select a country";
    //set the placeholder to state DropDownList input
    public stateWatermark: string = "Select a state";
    //set the placeholder to city DropDownList input
    public cityWatermark: string = "Select a city";
    @ViewChild('country')
    public countryObj?: DropDownListComponent | any;
    @ViewChild('state')
    public stateObj?: DropDownListComponent | any;
    @ViewChild('city')
    public cityObj?: DropDownListComponent | any;
    public countryChange(): void {
        let tempQuery: Query = new Query().where('CountryId', 'equal', this.countryObj.value);
        //Query the data source based on country DropDownList selected value
        this.stateObj.query = tempQuery;
        // enable the state DropDownList
        this.stateObj.enabled = true;
        //clear the existing selection.
        this.stateObj.text = null;
        // bind the property changes to state DropDownList
        this.stateObj.dataBind();
        //clear the existing selection in city DropDownList
        this.cityObj.text = null;
        //disabe the city DropDownList
        this.cityObj.enabled = false;
        //bind the property cahnges to City DropDownList
        this.cityObj.dataBind();
    }
    public stateChange(): void {
        // Query the data source based on state DropDownList selected value
        this.cityObj.query = new Query().where('SateId', 'equal', this.stateObj.value);
        // enable the city DropDownList
        this.cityObj.enabled = true;
        //clear the existing selection
        this.cityObj.text = null;
        // bind the property change to city DropDownList
        this.cityObj.dataBind();
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, DropDownListModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

cascading.html

<div id="wrapper" style='margin-top: 20px'>
        <div id='content' style="margin: 50px auto 0; width:250px;">
            <br>
                <ejs-dropdownlist #country id="country" [dataSource]="countryData" [fields]="countryFields" (change)="countryChange()" [placeholder]="countryWatermark"></ejs-dropdownlist>
            <div class="padding-top">
                <ejs-dropdownlist #state id="state" [dataSource]="stateData" [fields]="stateFields" (change)="stateChange()" [placeholder]="stateWatermark" [enabled]="false"></ejs-dropdownlist>
            </div>  
            <div class="padding-top">
                <ejs-dropdownlist #city id="city" [dataSource]="cityData" [fields]="cityFields" [placeholder]="cityWatermark" [enabled]="false"></ejs-dropdownlist>
            </div>  
        </div>
    </div>