How to bind dropdown values using Map<number, number[]> in Angular Typescript

Question

I have two dropdown in my angular UI. One is Industry and one is Designation. Based on any of this dropdown value selection i need to filter the dropdown values in another dropdown called Description

for that i have coded in typescript as something like below

const industryMap: Map<number, Array<number>> = new Map();

industryMap.set(1, [26, 23, 25, 29]);//Automobile
industryMap.set(2, [19, 7, 24, 20, 8, 13, 1, 6, 10, 15]);//Banking
industryMap.set(3, [24, 11, 4]);//FMCG
industryMap.set(4, [22, 12, 16, 17, 18, 21, 27, 28]);//IT
industryMap.set(5, [24, 2, 5]);//Pharma
industryMap.set(6, [14]);//Transport

And to capture the values from Industry OR Designation I have code like this

 scheduleIndustry(event: MatSelectChange) {
     this.industryselected = {
        value: event.value,
         text: event.source.triggerValue
     };

     this.filterSubCatogory(this.industryselected.value);
 }

One issue i am facing here is following this.industryMap.get(parentValue); is not returing any value from my industryMap array

 filterSubCatogory(parentValue) {
       let subItems = this.industryMap.get(parentValue);
 }

My target dropdown to filter has values like below

 subCategories = [
    { name: 'Agency Development Manager',id:1}, 
    { name: 'Assistant Manager',id:2}, 
    { name: 'Automation Testing',id:3}, 
    { name: 'Billing Staff',id:4}, 
    { name: 'Branch Manager',id:5}, 
    { name: 'Business Development Manager',id:6}, 
    { name: 'Collections Officer',id:7}, 
    { name: 'District Manager',id:8}, 
 ];

Based on the Industry selection some of the values are applicable in the subCategories list, to Map that applicable values for each industry, i am using the help of industryMap mapping table.

So in simple, what i am here trying to achieve here is when a user select say industry value as 1 then need to get its matching industryMap array values and based on that values need to filter the items in subCategories and that resulted items i need to bind to my description dropdown.

My component.html looks like below

  <mat-form-field appearance="fill">
  <mat-label>Select an Industry</mat-label>
          <mat-select (selectionChange)="scheduleIndustry($event)">
                <mat-option>None</mat-option>
                <mat-option value="1">Automobile</mat-option>
                <mat-option value="2">Banking, Financial Service and Insurance</mat-option>
                <mat-option value="3">FMCG</mat-option>
                <mat-option value="4">Information Technology(IT)</mat-option>
                <mat-option value="5">Pharmaceutical</mat-option>
                <mat-option value="6">Transaport</mat-option>
           </mat-select>
   </mat-form-field>

  <mat-select (selectionChange)="scheduleDesig($event)">
        <mat-option *ngFor="let categ of subCategories" 
              [value]="categ.id">
               {{ categ.name }}
        </mat-option>
   </mat-select>

How do i achieve this. Thanks in advance.

Nithin Paul · Accepted Answer · 2021-05-14 14:47:02Z

I made through it

In case if anyone is looking for this please check it out

First i need to change my html as

         <mat-form-field appearance="fill">
              <mat-label>Select a Job Designation (Optional)</mat-label>
              <mat-select (selectionChange)="scheduleDesig($event)">
                <mat-option *ngFor="let categ of jobDescriptions" [value]="categ.id">
                  {{ categ.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>

Then in my typescript file i added below methods

scheduleIndustry(event: MatSelectChange) {
    this.industryselected = {
      value: event.value,
      text: event.source.triggerValue
    };

   //Called new method to filter my mapping array
   this.filterMapping(this.industryselected.value);

}

In the filterMapping() i have written the logic to filter down the Mapping array like below

 filterMapping(parentValue) {
      let filteredMapping = this.industryMap.get(parentValue);
      //Here call to filter my subcategories based on my "filtered result array" is made
      const filterArray = this.filterSubCategories(this.subCategories, filteredMapping);
      //and response binded to my description dropdown 
      this.jobDescriptions = filterArray;
 }

And finally method to filter my two arrays based my id

  filterSubCategories(arr1, arr2) {
     const response = arr1.filter(item => arr2.includes(+item.id));

     return response;
  }

Hop it helps to someone.

Collectives™ on Stack Overflow

How to bind dropdown values using Map<number, number[]> in Angular Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related