Angular Material mat-select - Showing count number along with the first selected value in multiple selection

Question

In mat-select multiple selections, all the selected values are displayed in the select field. I want only the first selected value along with +1 or +2 etc if more than one value is selected.

Answer 1

You can use <mat-select-trigger> to customize the displayed output of selected value(s).

<mat-select [formControl]="toppings" multiple>
  <mat-select-trigger>
    {{toppings.value ? toppings.value[0] : ''}}
    <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
      +{{toppings.value.length - 1}}
    </span>
  </mat-select-trigger>
  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

.example-additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

Sample Solution on StackBlitz

---

References

Select | Angular Material (Section: Select with custom trigger text)