We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

2 how to handle change event for multiple cascaded country-state-city dependent drop down in angular 7. i am interested to save multiple addresses for user where the design goes like below.

below is my typescript file. it has this.states property which is used to populate states by using let state of states(*ngFor). i want to handle on this.states differently for different formGroupArray elements as shown i am replicating country state city on click function addButtonClick().

please help me handle country state city change dynamically as i am clicking on add more button(which adds other group below) and my country change should effect respective state of same group

export class ContactComponent implements OnInit {

public contactForm: FormGroup;
employees: any = [];
countries: any = [];
states: any = [];

constructor(private fb: FormBuilder, private employeeService: EmployeeService, private generalService: GeneralService) { }

ngOnInit() {

    this.contactForm = this.fb.group({  
        employee_name: ['', Validators.required],  
        addressGroup: this.fb.array([this.addMoreGroup()])  
    this.employeeService.getEmployees().subscribe((response: Response)=>{
        this.employees = response.statusText;
    this.generalService.getCountries().subscribe((response: Response)=>{
        this.countries = response.statusText;

    this.employeeService.saveEmployeeContactDetails(this.contactForm.value).subscribe((response: Response)=>{

get f() { return this.contactForm.controls; }

addMoreGroup(): FormGroup {  
  return this.fb.group({  
        address_line_1: ['', Validators.required],  
        country : ['', Validators.required],  
        state: ['', Validators.required],
        city: ['', Validators.required],  
        pincode : ['', Validators.required]  

getStates(country: number){
    this.generalService.getStates(country).subscribe((response: Response)=>{
        this.states = response.statusText;

addButtonClick(): void {  

removeButtonClick(i: number): void {  


Please refer for image or how design looks likes


1 Reply

PO Prince Oliver Syncfusion Team April 30, 2019 05:29 AM

Hello Santosh, 

Greetings from Syncfusion support. 

You can handle change event for multiple dynamically created dropdowns by passing the component instance in change event argument from the DropDownList element. Kindly refer to the following code snippet. 

<div class="row" *ngFor="let add of addItems" style="margin-top: 10px"> 
    <div class="col-sm-4"> 
        <ejs-dropdownlist #countryList id="country_{{add}}" [dataSource]='country' [fields]='countryFields' 
            (change)='onChange1($event, countryList, stateList)' popupHeight='auto' [placeholder]='countryWaterMark'> 
    <div class="col-sm-4"> 
        <ejs-dropdownlist #stateList id='state_{{add}}' [dataSource]='state' [fields]='stateFields' 
            [placeholder]='stateWaterMark' popupHeight='auto'></ejs-dropdownlist> 
    <div class="col-sm-4"><input placeholder="city" class='e-input'></div> 

public onChange1(e, countyObj, stateObj): void { 
    // query the data source based on country DropDownList selected value 
    let tempQuery: Query = new Query().where('CountryId', 'equal', countyObj.value); 
    stateObj.query = tempQuery; 
    // clear the existing selection. 
    stateObj.text = null; 
    // bind the property changes to state DropDownList 

We have attached a sample for your reference, please find it in the following location 

Let us know if you need any further assistance on this. 


Live Chat Icon For mobile
Up arrow icon