I have a view with three buttons, and initially the content of the first button is displayed. When a button is clicked, it becomes active, but on page load, the initial button does not have the active state. To set the first button as active upon page load, I added the following to the div:
[ngClass]="'active'"
The issue now is that when another button is clicked, the first button remains active. The data displayed depends on a string value. As each button is clicked, the string changes.
How can I implement a condition to check for the current string? For example, if the string matches the current data being displayed, then add the active class to that specific button?
This is what I am looking for in terms of syntax:
[ngClass]="'active'" if "myString == ThisIsActiveString;
However, the class is not added correctly using this syntax in my current button code:
<button [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
Just to clarify, the string is initially set to "EQUIFAX" on page load.
Here is an example based on the provided solution:
<button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>