How do i add up and down arrow based on p-dropdown menu open

[mdnafeed]

<p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Treatment" optionLabel="name" optionValue="id" [dropDownIcon]="pi pi-caret-down" > </p-dropdown>

[yigitfindikli]

Hi @mdnafeed!

You can add custom icons in multiple ways:

1-) You can access the p-dropdown with ViewChild and use the overlayVisible property for the check.
Demo: https://stackblitz.com/edit/kbepji?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.ts

2-) You can use emitters of p-dropdown. Create a local boolean something like dropdownVisible.

• onShow => dropdownVisible = true;
• onHide => dropdownVisible = false;

Apply icons:

get getDropdownIcon() { return this.dropdownVisible ? 'pi pi-caret-up' : 'pi pi-caret-down'; }

<p-dropdown ... [dropdownIcon]="getDropdownIcon"></p-dropdown>

3-) You can use dropdownicon template

Regards.

[mdnafeed]

Thank you for your help @yigitfindikli

Now it's working fine

[yigitfindikli]

Always happy to help!

[mdnafeed]

Hii @yigitfindikli

in component we have multiple <p-dropdown> and <p-multiSelect> dorpdown menu. above the code you are passing unique key in <p-dropdown> its working fine when single <p-dorpdown> item but in my component we have multiple <p-dropdown> and <p-multiSelect> field.

how to up and down icon change based on click when multiple <p-dropdown> and <p-multiSelect> are available in the component?

have any solution please add on stackblitz
Thanks