title: How to bind dropdown values using Map<number, number[]> in Angular Typescript
body: <p>I have two dropdown in my angular UI. One is <strong>Industry</strong> and one is <strong>Designation</strong>. Based on any of this dropdown value selection i need to filter the dropdown values in another dropdown called <strong>Description</strong></p>
  <p>for that i have coded in typescript as something like below</p>
  <pre><code>const industryMap: Map&lt;number, Array&lt;number&gt;&gt; = 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
  </code></pre>
  <p>And to capture the values from <strong>Industry</strong> OR <strong>Designation</strong> I have code like this</p>
  <pre><code> scheduleIndustry(event: MatSelectChange) {
       this.industryselected = {
          value: event.value,
           text: event.source.triggerValue
       };
  
       this.filterSubCatogory(this.industryselected.value);
   }
  </code></pre>
  <p>One issue i am facing here is following this.industryMap.get(parentValue); is not returing any value from  my <strong>industryMap</strong> array</p>
  <pre><code> filterSubCatogory(parentValue) {
         let subItems = this.industryMap.get(parentValue);
   }
  </code></pre>
  <p>My target dropdown to filter has values like below</p>
  <pre><code> 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}, 
   ];
  </code></pre>
  <p>Based on the <strong>Industry</strong> selection some of the values are applicable in the <strong>subCategories</strong> list, to Map that applicable values for each industry, i am using the help of <strong>industryMap</strong> mapping table.</p>
  <p>So in simple, what i am here trying to achieve here is when a user select say industry value as <strong>1</strong> then need to get its matching <strong>industryMap</strong> array values and based on that values need to filter the items in <strong>subCategories</strong> and that resulted items i need to bind to my <strong>description</strong> dropdown.</p>
  <p>My <strong>component.html</strong> looks like below</p>
  <pre><code>  &lt;mat-form-field appearance=&quot;fill&quot;&gt;
    &lt;mat-label&gt;Select an Industry&lt;/mat-label&gt;
            &lt;mat-select (selectionChange)=&quot;scheduleIndustry($event)&quot;&gt;
                  &lt;mat-option&gt;None&lt;/mat-option&gt;
                  &lt;mat-option value=&quot;1&quot;&gt;Automobile&lt;/mat-option&gt;
                  &lt;mat-option value=&quot;2&quot;&gt;Banking, Financial Service and Insurance&lt;/mat-option&gt;
                  &lt;mat-option value=&quot;3&quot;&gt;FMCG&lt;/mat-option&gt;
                  &lt;mat-option value=&quot;4&quot;&gt;Information Technology(IT)&lt;/mat-option&gt;
                  &lt;mat-option value=&quot;5&quot;&gt;Pharmaceutical&lt;/mat-option&gt;
                  &lt;mat-option value=&quot;6&quot;&gt;Transaport&lt;/mat-option&gt;
             &lt;/mat-select&gt;
     &lt;/mat-form-field&gt;
  
    &lt;mat-select (selectionChange)=&quot;scheduleDesig($event)&quot;&gt;
          &lt;mat-option *ngFor=&quot;let categ of subCategories&quot; 
                [value]=&quot;categ.id&quot;&gt;
                 {{ categ.name }}
          &lt;/mat-option&gt;
     &lt;/mat-select&gt;
  </code></pre>
  <p>How do i achieve this. Thanks in advance.</p>