Выравнивание по горизонтали различных типов элементов управления формой материала

Question

Я пытаюсь выровнять радио / флажки по горизонтали в разных типах элементов управления Angular Material в списке. Список представляет собой сочетание mat-list-option, mat-checkbox и mat-radio-button. Мне нужно, чтобы метки были выровнены по левому краю, а флажки / радиокнопки выровнены по правому краю.

Я безуспешно пытался использовать fxLayouts "row" и "space -ween". Я также пытался вмешаться в CSS, но, похоже, не могу понять это правильно. Я создал StackBlitz для него: https://stackblitz.com/edit/material-6-kj87kz

<mat-selection-list>
  <ng-container *ngFor="let text of texts">
    <mat-list-option [checkboxPosition]="'after'">
      {{ text }}
    </mat-list-option>
    <div style="padding: 0 16px">
      <mat-checkbox *ngIf="isCheckbox" fxLayout="row" fxLayoutAlign="space-between center">
        {{ text }}
      </mat-checkbox>
      <mat-radio-group *ngIf="isRadioGroup" fxLayout="column" fxLayoutAlign="space-between center">
        <mat-radio-button *ngFor="let subText of subTexts" fxLayout="row" [labelPosition]="'before'">
        {{ subText }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </ng-container>
</mat-selection-list>

Обратите внимание, что я удалил привязки, условия и действия из кода, чтобы упростить его. Вот что я сейчас получаю:

Как видите, я изо всех сил пытаюсь выровнять элементы управления. Кто-нибудь знает хороший подход, как этого добиться?

StackBlitz: https://stackblitz.com/edit/material-6-kj87kz

Answer 1

Вы должны использовать селектор ::ng-deep, чтобы изменить css из формы, флажок и радиокомпоненты. С небольшим изгибом и пробелом, это результат:

stackblitz

.mat-checkbox,
.mat-radio-group {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-checkbox-layout {
  display: flex;  
  width: 100%;
  justify-content: space-between;
}

:host ::ng-deep .mat-checkbox-label-before .mat-checkbox-inner-container {
  margin-right: 0;
}

.mat-radio-group {
  align-items: flex-start;
  flex-direction: column;
}

.mat-radio-button {
  width: 100%;
  height: 48px;

  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-radio-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}