primeNg : get value of all the p-dropdown on change event of one drop down

Question

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

app.component.html

<p-table>
        <ng-template pTemplate="header">
            <tr>
                <td>
                    Compnay Name <p-dropdown #cmpDropDown [options]="cmpResp" optionLabel="cmpName"
                        optionValue="cmpId" scrollHeight='150px'
                        (onChange)="getChangeAppDetails(cmpDropDown.value, deptDropDown, prodDropDown)">
                    </p-dropdown>
                </td>
                <td>
                    Department Name <p-dropdown #deptDropDown [options]="deptResp" optionLabel="deptName"
                        optionValue="deptId" scrollHeight='150px' 
                        (onChange)="getChangeDeptDetails(deptDropDown.value, cmpDropDown, prodDropDown)"> </p-dropdown>
                </td>
                <td>Product Name <p-dropdown #feedDropDown [options]="prodResp" optionLabel="prodName" optionValue="prodId"
                        scrollHeight='150px' getChangeProdDetails(prodDropDown.value, cmpDropDown, deptDropDown)> </p-dropdown>
                </td>                   
            </tr>                
        </ng-template>

    </p-table>

app.component.ts :-

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 = [ {"deptId": "ALL", "cmpId": "ALL", "deptName": "ALL"}];
    public prodResp            : any = [ {"prodId": "ALL", "deptId": "ALL", "prodName": "ALL"}];
        
    ngOnInit(){    
    
        //Get Compnay List
        this.cmpResp = [{"cmpId" : "ALL", "cmdName" : "ALL"}, {"cmpId" : "Sony", "cmdName" : "Sony"}, {"cmpId" : "Samsung", "cmdName" : "Samsung"}]        
                
    }//End of ngOnInIt
    
    //Change event of Compnay drop down
    getChangeCompnyDetails(cmpDropDownVal: String, deptDropDown: HTMLSelectElement, prodDropDown: HTMLSelectElement): void {        
    
        console.log("Compnay Id :- ", cmpDropDownVal)
        console.log("Department Id :- ", deptDropDown.value)
        console.log("Product Id :- ", prodDropDown.value)
        
    }

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

Expected Output :-

Compnay Id    :- Sony
Department Id :- ALL
Product Id    :- ALL

but it is giving me

Compnay Id    :- Sony
Department Id :- Undefine
Product Id    :- Undefine

Please help me with this..

Answer 1

Try to use ngmodel.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit{
    title = 'AngularUi';
    cmpDropDown = null;
    deptDropDown = null;
    feedDropDown = null;
    public deliveryDataResp    : any;
    public deliveryDataRespBck : any;
    public cmpResp             : any;
    public deptResp            : any = [ {"deptId": "ALL", "cmpId": "ALL", "deptName": "ALL"}];
    public prodResp            : any = [ {"prodId": "ALL", "deptId": "ALL", "prodName": "ALL"}];

    ngOnInit(){

        //Get Compnay List
        this.cmpResp = [{"cmpId" : "ALL", "cmdName" : "ALL"}, {"cmpId" : "Sony", "cmdName" : "Sony"}, {"cmpId" : "Samsung", "cmdName" : "Samsung"}]

    }//End of ngOnInIt

    //Change event of Compnay drop down
    onChange(): void {

        console.log("Compnay Id :- ", this.feedDropDown)
        console.log("Department Id :- ", this.deptDropDown)
        console.log("Product Id :- ", this.feedDropDown)

    }
}

<p-table>
  <ng-template pTemplate="header">
      <tr>
          <td>
              Compnay Name <p-dropdown [options]="cmpResp" optionLabel="cmpName"
                  optionValue="cmpId" scrollHeight='150px'
                  [(ngModel)]="cmpDropDown"
                  (onChange)="onChange()">
              </p-dropdown>
          </td>
          <td>
              Department Name <p-dropdown [options]="deptResp" optionLabel="deptName"
                  optionValue="deptId" scrollHeight='150px'
                  [(ngModel)]="deptDropDown"
                  (onChange)="onChange()"> </p-dropdown>
          </td>
          <td>Product Name <p-dropdown [options]="prodResp" optionLabel="prodName" optionValue="prodId"
            [(ngModel)]="feedDropDown" scrollHeight='150px'  (onChange)="onChange()"> </p-dropdown>
          </td>
      </tr>
  </ng-template>
</p-table>