Adding "delete" button in mat-select

Question

Hello Stackoverflow community,

I am trying to add a "Delete" button next to each mat-option of a given mat-select when hovering over the option itself. The hover portion works just fine. However, given the way I implemented this button, the data displayed after selecting an option is altered :

From this :

To this :

Here is a snippet of the code used :

HTML template :

<mat-form-field appearance="outline">
  <mat-select>
    <mat-option *ngFor="let year of data" [value]="year">

      <div style="display:flex; justify-content: space-between">
        <span>{{year}}</span>
        <span></span>
        <span class="deleteYear" (click)="openDeleteDialog(year)">
          <i class="material-icons-outlined">clear</i>
        </span>
      </div>

    </mat-option>
  </mat-select>
</mat-form-field>

I believe there is no relevant code in the typescript component to share. However, I'm more than willing to provide the source code if needed.

2 Questions :

How can I get rid of the "clear" (name of the "X" icon) text appended to the desired "year" string?
Right now, when I click the "X" button, the functions fires just fine. However, it also selects that option in the mat-select as by clicking on the "X" I also click on the row. Is there any way I can have the function fire but make the form not to believe that I selected the row?

Thanks to all for your support,

Eliseo Eliseo · Accepted Answer · 2020-03-21T12:18:05

You can use mat-select-tigger So, your .html becomes like

<mat-form-field appearance="outline">
  <mat-select [formControl]="value">
    <mat-select-trigger>
      {{value.value}}
       <span class="deleteYear" (click)="delete($event,value.value)">
          <mat-icon>clear</mat-icon>
        </span>
    </mat-select-trigger>
    <mat-option *ngFor="let year of data" [value]="year">

      <div style="display:flex; justify-content: space-between">
        <span>{{year}}</span>
        <span></span>
        <span class="deleteYear" (click)="delete($event,year)">
          <mat-icon>clear</mat-icon>
        </span>
      </div>

    </mat-option>
  </mat-select>
</mat-form-field>

And your function delete (*)

  value=new FormControl()

  delete(event:any,year:any)
  {
    event.preventDefault(); //<--prevent default
    event.stopPropagation();  //stop propagation
    this.data=this.data.filter(x=>x!=year) //<--remove the element from data
    if (this.value.value==year)
        this.value.setValue(null) //<--if the value is the remove data, set null

  }

the stackblitz

(*) I use a formControl, if you has a formGroup change this.value by

this.form.get(value)

Adding "delete" button in mat-select

3 Answers