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,