Angular material select option with action button-CodePudding

I have a need to add a delete button near the option to delete the option locally and from the server. So here is my code:

<mat-select>
    <mat-option
      *ngFor="let option of options"
      [value]="option.id"
      [innerHtml]="option.label"
      [disabled]="option.disabled"
      [matTooltip]="option.tooltip">
    </mat-option>
</mat-select>

My label goes through sanitizer, because the option label may contain HTML. So i tried to add this:

`<div style="position: absolute; right: 10px;">DELETE</div>`

Sanitizer:

return sanitizer.sanitize(SecurityContext.HTML, sanitizer.bypassSecurityTrustHtml(unsanitizedOptionLabel));

Before sanitizing, but it strips off the style

Is there a way how i can chieve this result?

CodePudding user response：

The mat-option can be fully customized by just adding content to it. Instead of passing innerHtml, you can just do this:

<mat-select>
    <mat-option
      *ngFor="let option of options"
      [value]="option.id"
      [disabled]="option.disabled"
      [matTooltip]="option.tooltip">
        <div [innerHtml]="option.label">
        <button mat-icon-button>...</button>
    </mat-option>
</mat-select>

Regarding the innerHtml the better solution would be to declare that html content directly in the template. That is, if you have control over what's passed inside the label of course.

For more details refer to the documentation.