How to display down/ up arrow based on selection on dropdown?

I want to change the up/down arrow based on selection. If dropdown is open arrow should point up and if it’s closed arrow should point down. I’m also trying to move the "clear" icon to the left of the arrow icon (currently it shows on the right). Can anyone point me in the right direction? Please see attached pictures:

This is what I want to accomplish:

Picture 1 – show "clear" icon on the left side of arrow

enter image description here

Picture 2 – arrow should point up when dropdown is opened

enter image description here

Here’s my LIVE DEMO

<mat-form-field [floatLabel]="'never'">
    <mat-label>Search</mat-label>
    <mat-select [(ngModel)]="selectedFood" disableOptionCentering panelClass="dva-mat-select-container">
        <mat-option *ngFor="let item of foods" [value]="item.value">
        {{ item.viewValue }}
        </mat-option>
    </mat-select>
    <button mat-button matSuffix *ngIf="selectedFood" mat-icon-button aria-label="Clear"
    (click)="onClick($event)">
      <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

43 thoughts on “How to display down/ up arrow based on selection on dropdown?”

Leave a Comment