CODEWITHSUNDEEP
htmlcssangular
Paul Kruger
Paul Kruger

Reputation: 2304

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

Upvotes: 45

Views: 148832

Answers (4)

Ben Racicot
Ben Racicot

Reputation: 5905

Add a class in Angular programmatically with class

[class]="obj.param.name"

Upvotes: 3

לבני מלכה
לבני מלכה

Reputation: 16251

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>

Upvotes: 18

sticky_elbows
sticky_elbows

Reputation: 1514

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.

Upvotes: 59

Angular Dev
Angular Dev

Reputation: 4916

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.

Upvotes: 4

Related Questions