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

you can add dynamic class using directive

Chellappan வ
– Chellappan வ

2018-07-05 09:02:31 +00:00
Commented Jul 5, 2018 at 9:02 — Chellappan வ
– Chellappan வ, Commented Jul 5, 2018 at 9:02
Possible duplicate of Add class to an element in Angular 4

Arun Kumaresh
– Arun Kumaresh

2018-07-05 09:03:56 +00:00
Commented Jul 5, 2018 at 9:03 — Arun Kumaresh
– Arun Kumaresh, Commented Jul 5, 2018 at 9:03

sticky_elbows · Accepted Answer · 2019-11-29 15:29:08Z

60

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.

edited Nov 29, 2019 at 15:29

answered Nov 15, 2019 at 12:26

sticky_elbows

1,5222 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EssaidiM · Accepted Answer · 2021-10-20 13:04:09Z

18

Use Renderer

See here:https://angular.io/api/core/Renderer

and here:https://angular.io/api/core/Renderer#setElementClass

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:https://angular.io/api/core/Renderer2

and here:https://angular.io/api/core/Renderer2#addClass

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>

edited Oct 20, 2021 at 13:04

EssaidiM

8,4221 gold badge20 silver badges23 bronze badges

answered Jul 5, 2018 at 9:07

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

9 Comments

Paul Kruger Over a year ago

The class I am adding is .selected, not the page names

Paul Kruger Over a year ago

We are getting there :) ! Haha. The problem now is that you need to remove the .selected from all the previous ones. Because this will add the .selected class nicely, but it never removes previous ones

לבני מלכה Over a year ago

of course and you have removeclass function (and I an woman:) )

Paul Kruger Over a year ago

Haha my bad, I removed the "man" for you :) Would you mind adding the remove function to your example as well please? Then the answer is more complete

לבני מלכה Over a year ago

use this.renderer.removeClass('button', 'selected'); then add class to selected

|

Angular Dev · Accepted Answer · 2018-07-05 09:56:01Z

4

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.

answered Jul 5, 2018 at 9:56

Angular Dev

4,9162 gold badges32 silver badges39 bronze badges

1 Comment

Paul Kruger Over a year ago

I don't feel like this really solves the 'Angular add class dynamically' problem, but this is an awesome solution! Thank you!

Ben Racicot · Accepted Answer · 2023-04-20 17:05:05Z

3

Add a class in Angular programmatically with class

[class]="obj.param.name"

answered Apr 20, 2023 at 17:05

Ben Racicot

6,05816 gold badges82 silver badges140 bronze badges

Collectives™ on Stack Overflow

Angular add class dynamically

4 Answers 4

Comments

9 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related