How to add CSS class name from variable in Angular 9 depends on boolean variable?

Question

I want to add class names from a variable, but it's depends on another variable in Angular 9.

Here is my TypeScript code

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

  // ...
}

Here is my HTML code:

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

I tried this too, but it's doesn't work:

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

Both solution give this result:

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

But I want this:

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

How can I add a class name from variable depends on boolean variable?

I'd remove [class] and use [ngClass]="[inputBlockClass, showLabel ? inputBlockExtraClass : '']". — developer033
– developer033, Commented Mar 28, 2020 at 19:28

developer033 · Accepted Answer · 2020-03-28 19:32:44Z

11

You can do it like this:

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

or you can get rid of [class]:

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

STACKBLITZ DEMO

answered Mar 28, 2020 at 19:32

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M A Salman Over a year ago

your solution of getting rid of class is nice.I learnt something new. Thanks

M A Salman · Accepted Answer · 2020-03-28 19:31:16Z

5

Did you try doing this? https://stackblitz.com/edit/angular-ngclass-nbleik

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

answered Mar 28, 2020 at 19:31

M A Salman

3,8302 gold badges14 silver badges28 bronze badges

1 Comment

M A Salman Over a year ago

Show some support by upvoting whenever you found it useful ;)

Collectives™ on Stack Overflow

How to add CSS class name from variable in Angular 9 depends on boolean variable?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related