title: primeNg : get value of all the p-dropdown on change event of one drop down
body: <p>I have a situation were on my html page is have 5 primeNg p-dropdown and I want to read the values of all the 5 dropdown on change event of any of the p-dropdown so that I can apply filters on all the selected values to show data in data grid. I am trying with Template Reference Variables but no luck</p>
  <p>app.component.html</p>
  <pre><code>&lt;p-table&gt;
          &lt;ng-template pTemplate=&quot;header&quot;&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Compnay Name &lt;p-dropdown #cmpDropDown [options]=&quot;cmpResp&quot; optionLabel=&quot;cmpName&quot;
                          optionValue=&quot;cmpId&quot; scrollHeight='150px'
                          (onChange)=&quot;getChangeAppDetails(cmpDropDown.value, deptDropDown, prodDropDown)&quot;&gt;
                      &lt;/p-dropdown&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      Department Name &lt;p-dropdown #deptDropDown [options]=&quot;deptResp&quot; optionLabel=&quot;deptName&quot;
                          optionValue=&quot;deptId&quot; scrollHeight='150px' 
                          (onChange)=&quot;getChangeDeptDetails(deptDropDown.value, cmpDropDown, prodDropDown)&quot;&gt; &lt;/p-dropdown&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Product Name &lt;p-dropdown #feedDropDown [options]=&quot;prodResp&quot; optionLabel=&quot;prodName&quot; optionValue=&quot;prodId&quot;
                          scrollHeight='150px' getChangeProdDetails(prodDropDown.value, cmpDropDown, deptDropDown)&gt; &lt;/p-dropdown&gt;
                  &lt;/td&gt;                   
              &lt;/tr&gt;                
          &lt;/ng-template&gt;
  
      &lt;/p-table&gt;
  </code></pre>
  <p>app.component.ts :-</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  
  export class AppComponent implements OnInit{
      title = 'AngularUi';  
      
      public deliveryDataResp    : any;
      public deliveryDataRespBck : any;
      public cmpResp             : any;
      public deptResp            : any = [ {&quot;deptId&quot;: &quot;ALL&quot;, &quot;cmpId&quot;: &quot;ALL&quot;, &quot;deptName&quot;: &quot;ALL&quot;}];
      public prodResp            : any = [ {&quot;prodId&quot;: &quot;ALL&quot;, &quot;deptId&quot;: &quot;ALL&quot;, &quot;prodName&quot;: &quot;ALL&quot;}];
          
      ngOnInit(){    
      
          //Get Compnay List
          this.cmpResp = [{&quot;cmpId&quot; : &quot;ALL&quot;, &quot;cmdName&quot; : &quot;ALL&quot;}, {&quot;cmpId&quot; : &quot;Sony&quot;, &quot;cmdName&quot; : &quot;Sony&quot;}, {&quot;cmpId&quot; : &quot;Samsung&quot;, &quot;cmdName&quot; : &quot;Samsung&quot;}]        
                  
      }//End of ngOnInIt
      
      //Change event of Compnay drop down
      getChangeCompnyDetails(cmpDropDownVal: String, deptDropDown: HTMLSelectElement, prodDropDown: HTMLSelectElement): void {        
      
          console.log(&quot;Compnay Id :- &quot;, cmpDropDownVal)
          console.log(&quot;Department Id :- &quot;, deptDropDown.value)
          console.log(&quot;Product Id :- &quot;, prodDropDown.value)
          
      }
  </code></pre>
  <p>So on from company drop down I will select Sony from drop down then on change event I want values of other two drop downs as well</p>
  <p>Expected Output :-</p>
  <pre><code>Compnay Id    :- Sony
  Department Id :- ALL
  Product Id    :- ALL
  </code></pre>
  <p>but it is giving me</p>
  <pre><code>Compnay Id    :- Sony
  Department Id :- Undefine
  Product Id    :- Undefine
  </code></pre>
  <p>Please help me with this..</p>