How can i expand mat-select with custom action?

Question

I have to implement a new function in mat-select next to the arrow, but i always messed up the html/scss and this new icon get covered by chips items. I attached a picture how this should looks like.

mat-select

my mat-select

<mat-select
      multiple
      [compareWith]="compareWith"
      [(ngModel)]="value"
      [disabled]="isDisabled"
      (ngModelChange)="onTouchedFn()">
      <mat-select-trigger>
        <mat-chip-list>
          <mat-chip *ngFor="let item of value; index as i" removable (removed)="removeItem(item)">
            {{ displayChipsValue(item) }}
            <i matChipRemove [ngClass]="Icons"></i>
          </mat-chip>
        </mat-chip-list>
      </mat-select-trigger>
      <mat-option *ngFor="let type of dataSource" [value]="type.value">
        {{ type.text }}
      </mat-option>
    </mat-select>

Where should i put in and how could i make it perfect with scss?

I try to deal with html/scss, but this new icon get covered by other items, i need a similar icon to arrow.

score 0 · Accepted Answer · answered May 22 '23 at 08:11

I feel you can use a .css some like

mat-chip-grid{
  padding-right:5rem;
}
.mat-mdc-form-field-icon-suffix
{
  margin-left:-3.5rem;
  margin-right:1rem;
}

And

<mat-form-field >
  <mat-select multiple [(ngModel)]="value">
    <mat-select-trigger>
      <mat-chip-grid>
        <mat-chip-row
          *ngFor="let item of ...; index as i" removable>
            ...
        </mat-chip-row>
      </mat-chip-grid>
    </mat-select-trigger>
    <mat-option *ngFor="let type of ..">
      ...
    </mat-option>
  </mat-select>
  <mat-icon matSuffix>close</mat-icon>
</mat-form-field>

How can i expand mat-select with custom action?

1 Answers1