mat-icon in multiple mat-select

Question

how fix issue with mat-icon in mat-select(multiple), after adding mat-icon and selecting option mat-icon value also displaying in selected values see attach image mat-select-list

selecte items list

<mat-form-field class="p-8 w-100-p" fxFlex>
          <mat-select multiple
            [(ngModel)]="documentCategory">
            <mat-option [value]="item" *ngFor="let item of documentTagsList">
              {{item}}
              <span fxFlex = '1 0 auto'></span>
              <mat-icon class="mat-24 mt-12 float-right"  (click)='deleteDocumentTag(item)'>delete</mat-icon>
            </mat-option>
          </mat-select>
</mat-form-field>

Islombek Hasanov Islombek Hasanov · Accepted Answer · 2020-03-03T16:09:59

You can use mat-select-trigger to customize what you show in the mat-select trigger text. For more information, check Angular Material: Custom Trigger Text

<mat-form-field class="p-8 w-100-p" fxFlex>    
  <mat-select multiple [(ngModel)]="documentCategory">
      <mat-select-trigger *ngIf="documentCategory">
         <span *ngFor="let category of documentCategory; last as isLast">
           {{category + isLast ? '' : ', '}}
         </span>
      </mat-select-trigger>
      <mat-option [value]="item" *ngFor="let item of documentTagsList">
         {{item}}
         <span fxFlex = '1 0 auto'></span>
         <mat-icon class="mat-24 mt-12 float-right"  (click)='deleteDocumentTag(item)'>delete</mat-icon>
      </mat-option>
  </mat-select>
</mat-form-field>

mat-icon in multiple mat-select

1 Answers