mat-select with checkboxes

Question

I really want the mat-select basic functionality but with checkboxes. If I turn on [multiple] I get the checkboxes but I also get multi-select functionality, I need single select and checkbox.

Answer 1

you can achieve your requirements like this,

here's is example,

in app.component.html

<mat-form-field>
    <mat-select placeholder="Toppings">
        <mat-option *ngFor="let topping of toppingList; let i =index" [value]="topping">
            <mat-checkbox [checked]="selected === i" (change)="onChange(topping);selected = i"> {{topping}}</mat-checkbox>
        </mat-option>
    </mat-select>
</mat-form-field>

and in app.component.ts

export class AppComponent {
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage'];
  selected = -1;

  /*checkbox change event*/
  onChange(event) {
    console.log(event)
  }
}

here's is Stackblitz demo