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>

Typescript

Change [ngClass] to ng-class. – Bernadine

<button ng-class="{'active': shown == EQUIFAX}"; (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button> Believing that shown and EQUIFAX are variables – Bernadine

Answer 1

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.

Offer

This gives me a parse error, Parser Error: Unexpected token ':' – Typescript

Please see my question, I updated the question with your answer at the bottom. I get that parse error. – Typescript

@Typescript In your case, it has to be [ngClass]="'active': shown == 'EQUIFAX'" because you want to compare variable shown with string EQUIFAX, not variable EQUIFAX. – Offer

You can check like [ngClass]="{'active': myString == ThisIsActiveString}"; Make it an object by enclosing it in {} – Bernadine

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. – Typescript

@StefanSvrkota above NgClass should be ngClass – Bernadine

@wuno, @Bernadine is right, you need to add {}, sorry about confusion, I edited answer. – Offer

Answer 2

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

Bigamist

Answer 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}"

Poynter

Answer 4

you can do that:

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

Euhemerism