Adding a visible icon to an Angular Material dropdown: A step-by-step guide

Question

Adding a visible icon to an Angular Material dropdown: A step-by-step guide

Seeking help on integrating a clear icon to the right side of a dropdown (select component) in Angular Material, only visible when an option is selected by the user. When this "clear" icon is clicked, the value should be deleted and the field reset. I currently have the dropdown set up but struggling with displaying the icon correctly. Any guidance on how to achieve this would be greatly appreciated. Thank you!

Snippet of my code:

<mat-form-field appearance="fill">
  <mat-label>Select a food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
    <mat-select-trigger>
        <button>
           <mat-icon>clear</mat-icon>
       </button>
    </mat-select-trigger>
  </mat-select>
</mat-form-field>

Check out the LIVE DEMO

javascript angular typescript angular-material

Answer 1

Answer №1

To enable two-way binding and add the selected value to mat-select, make sure to include ngModel on mat-select. Additionally, you can add a button as a suffix of mat-select.

<mat-select [(ngModel)]="selectedFood">
    <mat-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
    </mat-option>
</mat-select>
<button mat-button matSuffix *ngIf="selectedFood" mat-icon-button (click)="onClick($event)">
    <mat-icon>close</mat-icon>
</button>

To clear the selected food value on the component side, add the following function:

onClick(event: any) {
    this.selectedFood = "";
    event.stopPropagation();
}

The use of event.stopPropagation() will prevent the mat select dropdown from opening when the clear button is clicked.

For a fully functional example, visit:

https://stackblitz.com/edit/angular-c7hgum-94nqyq

Answer 2

To enable two-way binding and add the selected value to mat-select, make sure to include ngModel on mat-select. Additionally, you can add a button as a suffix of mat-select.

<mat-select [(ngModel)]="selectedFood">
    <mat-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
    </mat-option>
</mat-select>
<button mat-button matSuffix *ngIf="selectedFood" mat-icon-button (click)="onClick($event)">
    <mat-icon>close</mat-icon>
</button>

To clear the selected food value on the component side, add the following function:

onClick(event: any) {
    this.selectedFood = "";
    event.stopPropagation();
}

The use of event.stopPropagation() will prevent the mat select dropdown from opening when the clear button is clicked.

For a fully functional example, visit:

https://stackblitz.com/edit/angular-c7hgum-94nqyq

Answer 3

Answer №2

<div class="food-selection">
    <label>Choose your favorite food</label>
    <select [(ngModel)]="chosenFood">
        <option *ngFor="let item of menuItems" [value]="item.value">
            {{item.text}}
        </option>
    </select>
    <button *ngIf="chosenFood" (click)="clearSelection()">
        Clear Selection
    </button>
</div>

Answer 4

<div class="food-selection">
    <label>Choose your favorite food</label>
    <select [(ngModel)]="chosenFood">
        <option *ngFor="let item of menuItems" [value]="item.value">
            {{item.text}}
        </option>
    </select>
    <button *ngIf="chosenFood" (click)="clearSelection()">
        Clear Selection
    </button>
</div>

Answer 5

Answer №3

Here is THE SOLUTION that proved successful for me.... utilizing mat-select Within the component.ts file

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

To call the function in the template, use this syntax

(click)="onCLick($event)

Answer 6

Here is THE SOLUTION that proved successful for me.... utilizing mat-select Within the component.ts file

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

To call the function in the template, use this syntax

(click)="onCLick($event)

Answer 7

Answer №4

One possible method to achieve this is:

HTML:

<ng-template #clearRef>
  @if (value) {
    <svg
      class="text-danger"
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      (click)="$event.stopPropagation(); control.reset()"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
    </svg>
  }
</ng-template>

<ng-template #chevrondownRef>
  <svg class="chevron-down" [class.animate]="isPanelOpen" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  </svg>
</ng-template>

CSS:

.mat-mdc-form-field-type-mat-select {
  .mat-mdc-form-field-infix {
    --mat-form-field-container-vertical-padding: 0;

    .mat-mdc-select-arrow-wrapper {
      flex-direction: row-reverse;
      gap: 0.5rem;
    }
  }
}

.chevron-down {
  transition: all 0.25s ease;
  transform: translate(-50%, -50%) rotate(0deg);

  &.animate {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

TS:

including
```
encapsulation: ViewEncapsulation.None,
```

  private vcr = inject(ViewContainerRef);

  @ViewChild(MatSelect) matSelect!: MatSelect;
  @ViewChild("clearRef") clearRef!: TemplateRef<HTMLElement>;
  @ViewChild("chevrondownRef") chevrondownRef!: TemplateRef<HTMLElement>;

  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    const mdcSelectArrowWrapper = document.querySelector(".mat-mdc-select-arrow-wrapper");
    const mdcSelectArrow = this.matSelect._elementRef.nativeElement.querySelector(
      ".mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow",
    ) as HTMLElement;

    mdcSelectArrowWrapper?.appendChild(this.vcr.createEmbeddedView(this.clearRef).rootNodes[0]);
    mdcSelectArrow.replaceChildren(this.vcr.createEmbeddedView(this.chevrondownRef).rootNodes[0]);
  }

Outcome: https://i.sstatic.net/LrQ4IMdr.png

Answer 8

One possible method to achieve this is:

HTML:

<ng-template #clearRef>
  @if (value) {
    <svg
      class="text-danger"
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      (click)="$event.stopPropagation(); control.reset()"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
    </svg>
  }
</ng-template>

<ng-template #chevrondownRef>
  <svg class="chevron-down" [class.animate]="isPanelOpen" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  </svg>
</ng-template>

CSS:

.mat-mdc-form-field-type-mat-select {
  .mat-mdc-form-field-infix {
    --mat-form-field-container-vertical-padding: 0;

    .mat-mdc-select-arrow-wrapper {
      flex-direction: row-reverse;
      gap: 0.5rem;
    }
  }
}

.chevron-down {
  transition: all 0.25s ease;
  transform: translate(-50%, -50%) rotate(0deg);

  &.animate {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

TS:

including
```
encapsulation: ViewEncapsulation.None,
```

  private vcr = inject(ViewContainerRef);

  @ViewChild(MatSelect) matSelect!: MatSelect;
  @ViewChild("clearRef") clearRef!: TemplateRef<HTMLElement>;
  @ViewChild("chevrondownRef") chevrondownRef!: TemplateRef<HTMLElement>;

  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    const mdcSelectArrowWrapper = document.querySelector(".mat-mdc-select-arrow-wrapper");
    const mdcSelectArrow = this.matSelect._elementRef.nativeElement.querySelector(
      ".mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow",
    ) as HTMLElement;

    mdcSelectArrowWrapper?.appendChild(this.vcr.createEmbeddedView(this.clearRef).rootNodes[0]);
    mdcSelectArrow.replaceChildren(this.vcr.createEmbeddedView(this.chevrondownRef).rootNodes[0]);
  }

Outcome: https://i.sstatic.net/LrQ4IMdr.png

Adding a visible icon to an Angular Material dropdown: A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to display time instead of angles in highcharts?

Checking for the existence of a date in an array and retrieving its corresponding ID using AngularJS

Trouble with setInterval not refreshing the HTML element

Leveraging *ngFor to extract HTML content from ion-label

Something went wrong with @wdio/runner: unable to establish session

What is the best way to initiate actions once the form has been successfully processed?

Tips for creating a test to choose a movie from the MuiAutocomplete-root interface

Using Node.js with Express to seamlessly pass objects to EJS templates

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

Retrieving a pair of data points from a Vue <select> event when it changes

Tips for creating a fixed AppBar and table headers that are stacked underneath each other on a single page while scrolling, using Material UI

Nesting divs that soar within a contained div (not spanning the entire page)

Retrieving string-based JSON information

I am trying to locate the XPath for the NG repeat element with the following code snippet: ng-repeat="thread in threads | orderBy:'-last_ts' | filter : globalSearch track by $index" Can you assist

Utilizing Moment.js fromnow functionality with Vue.js and Laravel framework

When I click on my div, the color does not change as expected

"An ActionResult is received as null when the model is passed as an

The progression indicator on the mat-sidenav only displays halfway even when it shows 100 percent completed

Encountering a cyclic dependency issue

Insert a new item into an Observable within Ionic 4