Как добавить CSS имя класса из переменной в Angular 9, зависит от логической переменной?

Question

Я хочу добавить имена классов из переменной, но это зависит от другой переменной в Angular 9.

Вот мой код TypeScript

export class InputComponent implements OnInit {
  @Input() inputBlockClass = 'col-12 d-flex px-0';
  @Input() inputBlockExtraClass = 'col-md-9';
  @Input() showLabel = true;

  // ...
}

Вот мой HTML code:

<div [class]="inputBlockClass" [class.inputBlockExtraClass]="showLabel">

Я тоже пробовал, но это не работает:

<div [class]="inputBlockClass" [ngClass]="{inputBlockExtraClass: showLabel}">

Оба решения дают такой результат:

<div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 inputBlockExtraClass">

Но я хочу это:

<div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 col-md-9">

Как добавить имя класса из переменной зависит от логической переменной?

Answer 1

Вы можете сделать это так:

<div [class]="inputBlockClass" [ngClass]="showLabel ? inputBlockExtraClass : ''">

или вы можете избавиться от [class]:

<div [ngClass]="[inputBlockClass, showLabel ? inputBlockExtraClass : '']">

STACKBLITZ DEMO

Answer 2

Вы пытались это сделать? https://stackblitz.com/edit/angular-ngclass-nbleik

 <div [class]="inputBlockClass" [ngClass]="showLabel?inputBlockExtraClass:''">>
      sometext
 </div>