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";

You can check out this [link](https://stackoverflow.com/a/41974490/7812112) — Sarthak Aggarwal, Oct 26 '18 at 07:38
Thanks but there isn't what I was looking for in that link @SarthakAggarwal — realist, Oct 26 '18 at 07:41

score 2 · Answer 1 · answered Oct 26 '18 at 07:40

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 '18 at 07:40

Sarthak Aggarwal

2,284
1
8
12

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. – realist Oct 26 '18 at 07:51

SeleM · Accepted Answer · 2018-10-26T07:48:37.053

1

Just remove the quotes in your Ts part to

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

Stackblitz

edited Oct 26 '18 at 07:48

answered Oct 26 '18 at 07:42

SeleM

9,310
5
32
51

@HasanOzdemir it works for me , unless there is an issue with your class itself (bg-red). check the updated answer i provided a stackblitz; – SeleM Oct 26 '18 at 07:48
Thanks a lot @selemmn. But my IDE underline the code in .ts file like an error. – realist Oct 26 '18 at 07:49
Visual studio 2017 – realist Oct 26 '18 at 07:51
Opened and closed My IDE. and it's fixed. Thanks again @selemmn – realist Oct 26 '18 at 07:53
@HasanOzdemir Welcome :) – SeleM Oct 26 '18 at 07:53

Send condition as variable to class name in angular

2 Answers2