Search code examples
cssangularangular-material

delete mat-pseudo-checkbox from spécifique mat-option

In angular matérial, the mat-select has element mat-pseudo-checkbox who display an check icon in mat-option. I have multiple mat-select and I want to delete or hide this element.

With

::ng-deep .mat-pseudo-checkbox{
  display: none!important;
}

I can hide this. But I want hide this for just one mat-select like this

  <mat-form-field class="user-list">
      <mat-select class="selectAll">
         @for (user of userLists; track user) {
            <mat-option [value]="user.id">{{user.name}}</mat-option>
         }
      </mat-select>
  </mat-form-field>
Solution

  • We could set the panelClass which will apply the style only for a particular select, working example below!

    Mat Select API

    HTML

    <mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple panelClass="no-checkbox">
    <mat-select-trigger>
      {{toppings.value?.[0] || ''}} @if ((toppings.value?.length || 0) > 1) {
      <span class="example-additional-selection">
        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ?
        'other' : 'others'}})
      </span>
      }
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

    TS

    import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

/** @title Select with custom trigger text */
@Component({
  selector: 'select-custom-trigger-example',
  templateUrl: 'select-custom-trigger-example.html',
  styleUrl: 'select-custom-trigger-example.css',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatSelectModule,
    FormsModule,
    ReactiveFormsModule,
  ],
})
export class SelectCustomTriggerExample {
  toppings = new FormControl('');

  toppingList: string[] = [
    'Extra cheese',
    'Mushroom',
    'Onion',
    'Pepperoni',
    'Sausage',
    'Tomato',
  ];
}

    Stackblitz Demo