如何在表格组中不垂直对齐角度+材质垫复选框？

Question

I have two situations:

One, is where I'm using a FORM GROUP with using angular 5 + Angular Material Design.

Here's my code for multiple checkboxes

<div *ngSwitchCase="'checkboxField'" class="checkbox-field">
  <div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
    <div class="checkbox-label" *ngFor="let
         element of field?.elements">
         <mat-checkbox
        [value]="element?.properties.value"
        [disabled]="field?.properties.disabled"
        [checked]="isItemChecked(element?.properties.value)"
        (change)="onCheckboxChange(element?.properties.value);
        notifyFormOfChange($event);">
        {{element?.properties.title}}
    </mat-checkbox>
  </div>
</div>

There are two ways this can be displayed:

1) HORIZONTAL 2) VERTICAL

Vertical ONLY occurs with a form-group where I have multiple checkboxes or radio buttons (which I need to fix as well). When I don't use a form-group and simply put checkboxes or radio buttons, I have a LINE of CBX's or RB's with no space between them.

I need to VERTICALLY stack the CHECKBOXES when this property is set to true:

field.properties.stackVertically = true

I can only do this with CSS.

Here's the CSS for the form-group

.row[_ngcontent-c30] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

And there's nothing like that for the HORIZONTAL.

Switch VERTICAL is an OPTION "IF" this

field.properties.stackVertically = true

Here are the two pics of what I'm speaking of:

UPDATE TO THE GREAT ANSWER!!!

See the SUCCESS image and here's the CODE from above with the solution integrated.

I have to place the SOLUTION in the SECOND line not where I thought it had to be. A bit of Trial and Error but it works!!!

Now here's the code from above with answer by KimCindy! Thank you!

  <div *ngSwitchCase="'checkboxField'" class="checkbox-field">
    ***<div class="cb-wrapper" [ngClass]="{'cb-vertical': field?.properties?.stackVertically }">***
         <div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
      <div class="checkbox-label" *ngFor="let
           element of field?.elements">

           <mat-checkbox
          [value]="element?.properties.value"
          [disabled]="field?.properties.disabled"
          [checked]="isItemChecked(element?.properties.value)"
          (change)="onCheckboxChange(element?.properties.value);
          notifyFormOfChange($event);">
          {{element?.properties.title}}
      </mat-checkbox>
    </div>
  ***</div>***
</div><!--checkbox-->

Answer 1

Maybe you could try the ngClass directive.

Kindly see below example:

HTML:

<div class="cb-wrapper" [ngClass]="{'cb-vertival': !tmp }">
<mat-checkbox>Check 1</mat-checkbox>
<mat-checkbox>Check 2</mat-checkbox>
<mat-checkbox>Check 3</mat-checkbox>
<div>

CSS:

.cb-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  flex-flow: row;
}

.mat-checkbox {
  margin-left:20px;
} 

.cb-vertival {
  flex-flow: column;
}

TS:

export class CheckboxLayoutExample {
tmp : boolean = false;
}

Stackblitz: https://stackblitz.com/edit/angular-addm8z?file=app%2Fcheckbox-overview-example.css