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 · Accepted Answer · 2020-03-21 12:18:05Z

3

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)

answered Mar 21, 2020 at 12:18

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Remy Over a year ago

Took a little bit of fine-tuning but put me on the right track. I believe everything in the <span> tag in the <mat-select-trigger> isn't necessary. That's what's actually displaying the "X" after selecting a desired option. If you agree, please edit the answer so I can mark it as the accepted answer for future users stumbling across this question. Thank you very much.

Sumit Vekariya · Accepted Answer · 2020-03-21 07:58:45Z

0

Did you try with instead of using "i" tag for icon

<mat-icon>clear</mat-icon>

answered Mar 21, 2020 at 7:58

Sumit Vekariya

4882 silver badges12 bronze badges

1 Comment

Remy Over a year ago

Thank you for your reply. I indeed tried using the MatIcon module but the result is the same. Thanks

fraces s · Accepted Answer · 2021-02-25 14:48:36Z

0

It works with mat-select-trigger

<mat-form-field appearance="outline">
      <mat-select [formControl]="value">
        <mat-select-trigger>
          {{value.value}}
        </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>

answered Feb 25, 2021 at 14:48

$fraces s's user avatar$

fraces s

1

Collectives™ on Stack Overflow

Adding "delete" button in mat-select

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related