Is there a way to add a class from the .ts file, using Angular solutions
<div [class.extra-sparkle]="isDelightful == true">
I want to do the above but from the side of the .ts file. The less code the better.
<button class="general" (click)="ChangeScreen('Global')" [class.selected]="CurrentPage == 'Global'">Global</button>
<button class="general" (click)="ChangeScreen('Maintenance')" [class.selected]="CurrentPage == 'Maintenance'">Maintenance</button>
<button class="general" (click)="ChangeScreen('Settings')" [class.selected]="CurrentPage == 'Settings'">Settings</button>
<button class="general" (click)="ChangeScreen('Profile')" [class.selected]="CurrentPage == 'Profile'">Profile</button>
<button class="general" (click)="ChangeScreen('Transactions')" [class.selected]="CurrentPage == 'Transactions'">Transactions</button>
I would like to just add something like this into the ChangeScreen function:
ChangeScreen(page) {
page.addClass = page;
}
Then I can remove all of those lines: [class.selected]="CurrentPage == '...'"
3 Answers
You can use ngClass directive:
<div id="mydiv" [ngClass]="{'myCSSclass' : condition}"></div>
Simple as that! myDiv will have the class myCSSclass only when the condition evaluates to true. This condition can be set in your typescript file or in the template.
Use Renderer
See here:
and here:
import { Renderer } from '@angular/core';
constructor(private render:Renderer) { }
ChangeScreen(event:any) {
this.renderer.setElementClass(event.target,"selected",true);
}
In html:
<button class="general" (click)="ChangeScreen()">Global</button>
Or Render2:
See here:
and here:
import { Renderer2 } from '@angular/core';
constructor(private render:Renderer2) { }
ChangeScreen(event:any) {
this.renderer.addClass(event.target,"selected");
}
In html:
<button class="general" (click)="ChangeScreen($event)">Global</button>
While the solution with the Renderer works, I am proposing you create a data structure for your buttons
buttons: Array<{label: string}> = [
{
label: 'Global'
},
{
label: 'Maintenance'
},
{
label: 'Settings'
},
{
label: 'Profile'
},
{
label: 'Transactions'
}
]
This can easily be iterated through using ngFor
<button
*ngFor="let button of buttons"
class="general"
(click)="ChangeScreen(button.label)"
[class.selected]="CurrentPage == button.label">
{{ button.label }}
</button>
And only thing your ChangeScreen method would need is... the thing its already doing, setting the current page!
See stackblitz for an example of how this plays out.
