Angular add class dynamically

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 (click)="ChangeScreen('Global')" [class.selected]="CurrentPage == 'Global'">Global</button> <button (click)="ChangeScreen('Maintenance')" [class.selected]="CurrentPage == 'Maintenance'">Maintenance</button> <button (click)="ChangeScreen('Settings')" [class.selected]="CurrentPage == 'Settings'">Settings</button> <button (click)="ChangeScreen('Profile')" [class.selected]="CurrentPage == 'Profile'">Profile</button> <button (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 [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 (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 (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" (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.