6

I got this stackblitz example for lists with selection as shown in below image.

enter image description here

In the selection list,the list is selecting fine but how can i remove the checkbox?

Shankar
  • 2,565
  • 8
  • 29
  • 56
  • which check box you want to remove? – Akj Aug 21 '18 at 06:05
  • can you please describe in brief what you exactly try to doing or what is your requirement? – Kaushik Andani Aug 21 '18 at 06:06
  • In selection lists example.as shown in the image. – Shankar Aug 21 '18 at 06:06
  • so you want to remove check box which is not selected? – Akj Aug 21 '18 at 06:07
  • As shown in the image there is a list with selection,the working stackblitz example i have given.I don't want the selected option(right mark with check box) as shown in the image.@KaushikAndani – Shankar Aug 21 '18 at 06:09
  • I don't want checkbox at all,weather its selected/or not. If it is selected it's just change the background color.I don't want any check box.@UnluckyAj – Shankar Aug 21 '18 at 06:10
  • I think he wanted to toggle between the states of having the checkboxes and not having the checkboxes... – geoyws Nov 01 '18 at 11:18

7 Answers7

15

add display:none for this

I have create a demo on Stackblitz

.css /.sccc

:host {
    ::ng-deep.mat-pseudo-checkbox{
      display: none !important;
    }
}
Ionut Breaz
  • 23
  • 5
Krishna Rathore
  • 9,389
  • 5
  • 24
  • 48
  • This one just will remove the checkbox but the selection wont work well then you need to make more customization. – omi5489 Dec 18 '18 at 15:38
2

Ng-deep is deprecated. Alternatively use: encapsulation: ViewEncapsulation.None

TS

@Component({
  selector: 'component-name',
  ...
  encapsulation: ViewEncapsulation.None
})

CSS

component-name .mat-pseudo-checkbox {
  display: none !important;
}
Rafael Pizao
  • 742
  • 8
  • 21
1

Add attribute [multiple]="false" in <mat-selection-list> tag. Works for me!

Source example: https://material.angular.io/components/list/examples#list-single-selection

joanfornis
  • 19
  • 1
  • I like this answer the best. It's simple, doesn't get in the weeds with ng::deep and other styling tricks that can lead to unexpected behaviour – spencer Aug 30 '23 at 19:21
1

Use hideSingleSelectionIndicator in mat-selection-list like this: <mat-selection-list [multiple]="false" hideSingleSelectionIndicator>

"By default, MatSelectionList displays radio or checkmark indicators to identify selected items. While you can hide the radio indicator for single-selection via hideSingleSelectionIndicator, this makes the component less accessible by making it harder or impossible for users to visually identify selected items."

See https://material.angular.io/components/list/overview#selection

Maxime Robion
  • 11
  • 1
0

An interesting alternative would be to use button toggle group with vertical orientation.

Vitaly Sazanovich
  • 595
  • 8
  • 15
0

Better than these options, there is a built in option called hideSingleSelectionIndicator. You can couple this with some css as well to default highlight. https://material.angular.io/components/list/overview#selection

//this sets the background color of the selected item in the list
#my-list-id[aria-selected="true"] {
    background: rgb(232,228,228);
}
<mat-selection-list hideSingleSelectionIndicator [multiple]="false">
    <mat-list-option id="my-list-id"> 1 </mat-list-option> 
    <mat-list-option> 2 </mat-list-option>
</mat-selection-list>
J.Doe
  • 155
  • 1
  • 9
-1

If you remove the multiple directive from <mat-select></mat-select> the checkboxes should not be displayed.

If you want to do it using CSS then you need to add a panelClass, this will allow you to specify the options that you want to modify.

<mat-select multiple panelClass="test-class">
...
</mat-select>

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

to avoid using ::ng-deep you can place the CSS rules in the styles.css file at the root

user18343391
  • 1
  • 2