Send condition as variable to class name in angular

Question

I want to give conditional class a div. But my problem is, I want "myClassCondition" as a string like below. When I write like this <div [class]="7 > 6 ? 'bg-red' : null"> MyText </div>, it is working perfectly. But I want send from .ts file as variable like below. How can I do this?

<div [class]="myClassCondition"> MyText </div>

-

myClassCondition = "7 > 6 ? 'bg-red' : null";

Thanks but there isn't what I was looking for in that link @SarthakAggarwal — realist
– realist, Commented Oct 26, 2018 at 7:41

Sarthak Aggarwal · Accepted Answer · 2018-10-26 07:40:37Z

2

You can try the following

.component.html

<div [class.bg-red]="myClassCondition"> MyText </div>

.component.ts

myClassCondition = 7 > 6 ? true : false;

answered Oct 26, 2018 at 7:40

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

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

1 Comment

realist Over a year ago

Thanks for your reply @SarthakAggarwal. This worked. But what I was looking for is selemmn's answer. But this information also very helpful for me. Because i don't know usage like [class.bg-red]. I learnt new thing.

SeleM · Accepted Answer · 2018-10-26 07:48:37Z

1

Just remove the quotes in your Ts part to

myClassCondition = 7 > 6 ? 'bg-red' : null;

Stackblitz

edited Oct 26, 2018 at 7:48

answered Oct 26, 2018 at 7:42

SeleM

9,6785 gold badges36 silver badges55 bronze badges

5 Comments

SeleM Over a year ago

@HasanOzdemir it works for me , unless there is an issue with your class itself (bg-red). check the updated answer i provided a stackblitz;

realist Over a year ago

Thanks a lot @selemmn. But my IDE underline the code in .ts file like an error.

realist Over a year ago

Visual studio 2017

realist Over a year ago

Opened and closed My IDE. and it's fixed. Thanks again @selemmn

SeleM Over a year ago

@HasanOzdemir Welcome :)

Collectives™ on Stack Overflow

Send condition as variable to class name in angular

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related