Angular Add Class Dynamically

Question

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 == '...'"

Accepted Answer

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.

Answer 2

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>

Answer 3

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.

Angular Add Class Dynamically

3 Answers

Must Read

Your Answer

James H. Sterling

Angular Add Class Dynamically

3 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

James H. Sterling