Angular-How can I disable options from one dropdown based on option selected on another dropdown?

Question

I was working on a project with two drop-downs having grouped options and multiple selection . There I was trying to disable the entire group of options selected in one dropdown, when it is selected in another dropdown.But I was facing two problems.

Here is the JSON:

 items = [
    {
      type: 'all',
      name: ['All Pokemon'],
    },
    {
      type: 'water',
      name: [
        'Squirtle',
        'Wartortle',
        'Blastoise',
        'Psyduck',
        'Golduck',
        'Tentacool',
        'Seel',
      ],
    },
    {
      type: 'fire',
      name: [
        'Charmander',
        'Charizard',
        'Vulpix',
        'Arcanine',
        'Ponyta',
        'Magmar',
        'Cyndaquil',
      ],
    },
    {
      type: 'earth',
      name: ['Growlithe', 'Arcanine', 'Geodude', 'Golem', 'Onix'],
    },
  ];

1. When I select Wartortle from type:water in the 1st dropdown, the whole group of type:water should get disabled in the 2nd dropdown.
2. If I have selected Wartortle from type:water in the 1st dropdown then I should only be able to select from type:water in the 1st dropdown and if I try to select anything from another type the both the dropdowns should get reset.

This is what I was able to do so far:

I made two arrays(for 2 dropdowns):

this.items.forEach((data) => {
      data['disable'] = false;
    });
this.arr1 = this.items;
this.arr2 = this.items.filter((x) => x.type !== 'all');

This is the logic I am using to disbale it:

if (includeTest.length) {
      includeTest.map((x1) => {
        this.arr1.forEach((y1) => {
          if (y1.name.includes(x1)) {
            y1.disable = true;
          } else {
            y1.disable = false;
          }
        });
        this.arr2.forEach((y2) => {
          if (y2.name.includes(x1)) {
            y2.disable = true;
          } else {
            y2.disable = false;
          }
        });
      });
    } else {
      this.arr1.forEach((x) => {
        x.disable = false;
      });
      this.arr1.forEach((x) => {
        x.disable = false;
      });
    }

Here, includeTest contains array of string based on which,I have to filter out the objects from the other array. This is the stackblitz representation of the problem :

Answer 1

Try to read about Angular Pipes, especially about "filter". There is lot's of resource in here and also in documentation of Angular.

Shortly described, all your 'ngFor' or 'ng-repeat' must be filtered through your filter pipe. When you select something from dropdown 1, the filter on dropdown 2, fill show data filtered based on dropdown 1 value or vice-versa.

if (dropdown1.type == 'water') {dropdown2.items = ...}

or

if (dropdown1.type == 'water' && dropdown1.name == 'Vulpix') {dropdown2.items = ...}

or

<li *ngFor="let item of dropdown2 | callback: filterData">...</li>

filterData(item: Item) {
    if (dropdown1.type == 'water' && item == 'your rules') {return item}
}

so the data of dropdown 2 always will be based on dropdown 1

Answer 2

I was able to achieve my 1st issue. I used .forEach() instead of .map() and checked if selected option is in the object using .includes() . A stackblitz representation of it.

But still unable to solve the second issue