Angular Material checkbox alignment

Question

I have a little alignment problem that I cannot solved. I am using Angular Material checkbox component for showing list of options and the user can click on them and choose multiple options. Everything is working fine but i am facing a little bit of style issue that i really cannot solve.

Code Sample on StackBlitz

What I want to have at the end is have all the checkboxes aligned at the right of the available space.

Does anyone have a solution to this?

Answer 1

Adding this to your css will work:

::ng-deep .mat-checkbox-inner-container {
  margin-right: 0 !important;

}

You need to either use.important or increase your selector specificity by adding an id on the checkbox and using it in the selector.

Answer 2

An easy way to solve this is to use Angular Material's mat-selection-list ( Angular Material list API reference docs ) and then excluding its ripple effect, where the checkbox is already aligned on the right side.

component.ts

testItems: string[] = ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5'];

component.html

<mat-selection-list [disableRipple]="true" #item>
  <mat-list-option *ngFor="let test of testItems">
    {{test}}
  </mat-list-option>
</mat-selection-list>

The benefit of this is that you don't have to deal with default mat-checkbox styling and mat-selection-list is an Angular component too, resulting in an example on StackBlitz .

Outcome of StackBlitz: