Angular 2 Change Class On Condition

Question

I have three buttons in a view and on page load I am displaying the first buttons content. Once a button is clicked the button becomes active but on page load the initial button is not set to active. In order to show the first button active I added this to the div:

[ngClass]="'active'"

The problem with this is now when another button is clicked the first button keeps the active class. I am evaluating the data being show based on a string. On click of each button the string changes.

How can I add a condition to check for the current string? So if the string matches the current data being show then add the active class to this button?

So something like this is what I am looking for:

[ngClass]="'active'" if "myString == ThisIsActiveString;

This is my current button, but the class is not added when I add it in this syntax:

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

To be clear the string is defaulted to "EQUIFAX" on page load.

This is based on answer:

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

Change `[ngClass]` to `ng-class`. – sam Nov 08 '16 at 18:43 — sam, Nov 08 '16 at 18:43
`` Believing that `shown` and `EQUIFAX` are variables – sam Nov 08 '16 at 18:45 — sam, Nov 08 '16 at 18:45

Stefan Svrkota · Accepted Answer · 2016-11-08T18:42:57.037

21

You can add css class based on condition in NgClass directive itself:

[ngClass]="{ 'active': myString == ThisIsActiveString }";

You can read more about NgClass directive and find examples here.

edited Nov 08 '16 at 18:42

answered Nov 08 '16 at 18:30

Stefan Svrkota

48,787
9
98
87

This gives me a parse error, Parser Error: Unexpected token ':' – wuno Nov 08 '16 at 18:35
Please see my question, I updated the question with your answer at the bottom. I get that parse error. – wuno Nov 08 '16 at 18:35
@wuno In your case, it has to be `[ngClass]="'active': shown == 'EQUIFAX'"` because you want to compare variable `shown` with string EQUIFAX, not variable `EQUIFAX`. – Stefan Svrkota Nov 08 '16 at 18:37
You can check like `[ngClass]="{'active': myString == ThisIsActiveString}";` Make it an object by enclosing it in `{}` – sam Nov 08 '16 at 18:40
I still get the same parse error. I updated my question with the button at the bottom again. Do you see anything that could be causing this problem. – wuno Nov 08 '16 at 18:41
@StefanSvrkota above `NgClass` should be `ngClass` – sam Nov 08 '16 at 18:42
@wuno, @sam is right, you need to add `{}`, sorry about confusion, I edited answer. – Stefan Svrkota Nov 08 '16 at 18:46

score 3 · Answer 2 · answered Nov 08 '16 at 18:43

Your equivalence statement of [class.active]="shown == EQUIFAX" is comparing shown to a variable named EQUIFAX.

You should, instead, change the equivalency to compare to the string [class.active]="shown == 'EQUIFAX'"

Using [ngClass] would get you [ngClass]="{'active': shown == 'EQUIFAX'}

Here's a playground with this implemented: http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

score 3 · Answer 3 · answered Jan 04 '19 at 09:14

3

If you want for example to add many classes and have two or more conditions, each class and condition you can add after , comma.

For example

[ngClass]="{'first-class': condition,
            'second-class': !condition}"

answered Jan 04 '19 at 09:14

Druta Ruslan

7,171
2
28
38

score 2 · Answer 4 · answered Sep 12 '17 at 08:51

2

you can do that:

[class.nameForYourClss]="myString == ThisIsActiveString ";

answered Sep 12 '17 at 08:51

yanai edri

359
2
4

Angular 2 Change Class On Condition

4 Answers4

Linked