mat-selection-list with alternative to checkbox?

Question

Related: https://github.com/angular/components/issues/9739

I've tried many solutions, including hiding the checkbox (so I could replace with a new button):

::ng-deep .mat-option:first-child .mat-pseudo-checkbox {
    display: none;
}

Or from https://stackoverflow.com/a/51942592:

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

And various other techniques… but none succeed in removing the checkbox.

The only other thing I can think of are messing with ViewEncapsulation, or using mixins; like Angular Material uses to build their website:

https://github.com/angular/material.angular.io/blob/a742dc0/src/app/pages/component-viewer/_component-viewer-theme.scss

@mixin component-viewer-theme($theme) {
  // … prelude omitted for brevity

  guide-viewer,
  app-component-viewer {
    color: mat-color($foreground, text);

    .mat-tab-label:focus {
      color: mat-color($foreground, text);
    }
  }
}

…but that would require maintaining a theme loading hierarchy like they've done. Is there an easier/better approach?

Answer 1

You can "simulate" a selection list using a simple list.

If you has an array of object

typesOfShoes: any[] = [{data:'Boots'}, 
                       {data:'Clogs'}, 
                       {data:'Loafers'}, 
                       {data:'Moccasins'}, 
                       {data:'Sneakers'}]

You can use

<mat-list>
    <ng-container *ngFor="let shoe of typesOfShoes">
            <mat-list-item >
        <button mat-button style="text-align:left;width:100%"
           (click)="shoe.selected=!shoe.selected">
        {{shoe.data}} - {{shoe.selected}}
        </button>
            </mat-list-item>
    </ng-container>
</mat-list>

See a example in stackblitz