CODEWITHSUNDEEP
javascriptangulartypescriptangular2-templateangular2-directives
wuno
wuno

Reputation: 9885

Angular 2 Change Class On Condition

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>

Upvotes: 16

Views: 41120

Answers (4)

Druta Ruslan
Druta Ruslan

Reputation: 7412

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

Upvotes: 3

yanai edri
yanai edri

Reputation: 369

you can do that:

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

Upvotes: 2

silentsod
silentsod

Reputation: 8335

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

Upvotes: 3

Stefan Svrkota
Stefan Svrkota

Reputation: 50663

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.

Upvotes: 21

Related Questions