Add/Remove items/values from primeNg multiselect dropdown based on values selected/deselected from another primeNg multiselect dropdown

Question

First multiselect dropdown :-

<p-multiSelect (onChange)="ondestinationSelect($event, dataKey)" [options]="destinations" [showToggleAll]="false" [filter]="false" optionLabel="destination_name" dataKey="id" defaultLabel="Select Destination(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Destination(s) Selected"></p-multiSelect>

Based on values selected/deselected from above dropdown it should add/remove values from below dropdown :-

<p-multiSelect (onChange)="onresidenceSelect($event, dataKey)" [options]="residences" [showToggleAll]="false" [filter]="false" [optionLabel]="residence_name" [dataKey]="id" defaultLabel="Select Residence(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Residence(s) Selected"></p-multiSelect>

Eg. values of first drop down(this is a response of service):

0:{id: "1", destination_name: "Matheran"}
1:{id: "2", destination_name: "Mumbai destination"}
2:{id: "3", destination_name: "Lonavla"}
3:{id: "4", destination_name: "Nashik"}

values of second drop down when second option from above values is selected :

0:{id: "1", residence_name: "Mumbai Residence 1", destination_id: "2"}
1:{id: "2", residence_name: "Mumbai Residence 2", destination_id: "2"}
2:{id: "3", residence_name: "saegrg asrgsdg", destination_id: "2"}
3:{id: "4", residence_name: "Test residence 1", destination_id: "2"}
4:{id: "6", residence_name: "sdbdfb dfgsgfb ddfgdf", destination_id: "2"}
5:{id: "8", residence_name: "Residence Name test 1.11 update 1.0", destination_id: "2"}
6:{id: "13", residence_name: "Residence Name test 2", destination_id: "2"}
7:{id: "15", residence_name: "drbbg", destination_id: "2"}
8:{id: "16", residence_name: "dkjg dgjj", destination_id: "2"}
9:{id: "17", residence_name: "test res 1", destination_id: "2"}
10:{id: "18", residence_name: "test 2", destination_id: "2"}
11:{id: "19", residence_name: "test 2", destination_id: "2"}

Now, when option 2 from 1st drop down is deselected then 2nd dropdown should be empty. But in my case it not getting empty.

Here is the code that I tried :

ondestinationSelect(event) {
    let destinationIdArray = <FormArray>this.addteammateform.get('destinationsresponsiblefor');    
    let destinationId = new FormControl();

    if(event.value.length > destinationIdArray.length) {
      this.usermanagementService.get_residences(event.itemValue.id).subscribe(response => {
        if(response) {
          this.residences = response;
        }     
      });

      destinationId.setValue(event.itemValue.id);
      destinationIdArray.push(destinationId);
    }
    else {
      let i = 0;
      if(this.residences != undefined) {
        while(i < this.residences.length) {
          if(this.residences[i].destination_id == event.itemValue.id) {
            this.residences.splice(this.residences[i], 1);
          }
          else {
            ++i;
          }
        }
      }

      let destinationIndex = destinationIdArray.controls.indexOf(event.itemValue.id); 
      destinationIdArray.removeAt(destinationIndex);
    }
  }

Answer 1

I found the solution to above problem. Here is the code. But there is also an issue that I encountered : Eg. Say 1st dropdown is country and second is state. When you select country in 1st dropdown 2nd dropdown is populated with respective states. Check any option(s) in 2nd dropdown. Now, after unchecking country in 1st dropdown 2nd dropdown is empty but count(shown by code

selectedItemsLabel="{0} Residence(s) Selected"

doesn't get updated. One more issue is when you again check the same country option in 1st dropdown 2nd dropdown is populated with states but this time it shows option as checked for those value you previously selected.

1st Drop down.

<p-multiSelect [options]="destinations" [panelStyle]="{minWidth:'12em'}" [showToggleAll]="false" [filter]="false" (onChange)="ondestinationSelect($event)" defaultLabel="Select Destination(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Destination(s) Selected">
  <ng-template let-destination>
    <span>{{destination.label}}</span>
  </ng-template>
</p-multiSelect>

On clicking any checkbox in 1st drop down it'll get data w.r.t to the clicked option and 2nd drop down is populated with that data.

ondestinationSelect(event) {
    let destinationIdArray = <FormArray>this.addteammateform.get('destinationsresponsiblefor');    
    let destinationId = new FormControl();

    if(event.value.length > destinationIdArray.length) {
      this.usermanagementService.get_residences(event.itemValue).subscribe(response => {
        if(response.length > 0) {
          for(let residenceIndex of response) {
            let residencePush = {label : residenceIndex.residence_name, value:{id:residenceIndex.id, destination_id : residenceIndex.destination_id}};
            this.residences.push(residencePush);
          }
        }    
      });
      destinationId.setValue(event.itemValue.id);
      destinationIdArray.push(destinationId);
    }
    else {
      let residenceCount = this.residences.length;
      let deleteResidenceArray : any = [];

      for(let i=residenceCount - 1; i >=0 ; i--) {
        if(this.residences[i].value.destination_id == event.itemValue) {
          this.residences.splice(i, 1)
        }
      }

      let destinationIndex = destinationIdArray.controls.indexOf(event.itemValue.id); 
      destinationIdArray.removeAt(destinationIndex);
    }
  }

2nd Drop down.

<p-multiSelect (onChange)="onresidenceSelect($event)" [options]="residences" [panelStyle]="{minWidth:'12em'}" [showToggleAll]="false" [filter]="false"  defaultLabel="Select Residence(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Residence(s) Selected">
  <ng-template let-residence>
    <span>{{residence.label}}</span>
  </ng-template>
</p-multiSelect>