Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Materials mat-list options (Is it possible to positioned check-boxes left?)

The mat-list control is featured here: https://material.angular.io/components/list/overview

Is it possible to start the list items with the checkbox in front of them ( rather than postfixing them at the end due to defaults )?

I tried this but no luck!

/* mat-list: atempt to move the checkboxes to the far left */
.mat-pseudo-checkbox {
  left: 0 !important;
}
like image 631
Average Joe Avatar asked Dec 25 '17 16:12

Average Joe


People also ask

How do I disable mat list items?

You can't disable it because a mat-list-item isn't clickable by default. What you could do is to use *ngIf to show a mat-list-item with a routerlink and a mat-list-item without a routerlink.

What is Mat checkbox?

The mat-checkbox is the selector of MatCheckbox directive which is used to create Material design checkbox. The MatCheckbox supports all the functionality of HTML 5 checkbox. A MatCheckbox can be checked, unchecked, indeterminate, or disabled.


1 Answers

Each component has an API section which gives you additional features:

https://material.angular.io/components/list/api#MatListOption

<mat-list-option checkboxPosition="before"></mat-list-option>
like image 136
cgatian Avatar answered Oct 02 '22 13:10

cgatian