Angular 10 | Add class name as variable to ngClass

Question

I have 20+ elements, which all should use the same class (animate.css)

It is super annoying to change all classes if I want to edit the animation, so I saved the animation class in my service in a variable:

animClassSecond = "animate__animated animate__bounceInUp";

But I cant figure out how to add it to [ngClass], this does not work:

[ngClass]="{'select_elem':true, 'btn_2':true, 'dataService.animClassSecond':true}"
[ngClass]="{'select_elem':true, 'btn_2':true, 'this.dataService.animClassSecond':true}"
[ngClass]="{'select_elem':true, 'btn_2':true, this.dataService.animClassSecond:true}"
[ngClass]="{'select_elem':true, 'btn_2':true, dataService.animClassSecond:true}"

Its either a template error or it does not resolve to the variable. Any ideas?

P.S.: Adding a second [ngClass] attribute also does not work, because the first one is ignored.

Eliseo · Accepted Answer · 2020-10-07 08:10:31Z

6

is:

[ngClass]="dataService.animClassSecond"

But remember that you need declare the service public in the constructor

constructor(public dataService:DataService){}

NOTE you can use class and [ngClass] in the same tag:

class="select_elem btn_2" [ngClass]="dataService.animClassSecond"

edited Oct 7, 2020 at 8:10

answered Oct 7, 2020 at 8:03

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Comments

smnbbrv · Accepted Answer · 2020-10-07 07:58:37Z

0

This is probably not achievable in the template since the Angular template language is quite limited.

Just move the logic of ngClass object into your component.ts. There you can use all TypeScript's power

ngOnInit() {
  this.ngClassObj = { [dataService.animClassSecond]: true };
}

or if you need it to be dynamic (use this one carefully because it might become a performance issue)

get ngClassObj() {
  return { [dataService.animClassSecond]: true };
}

and then

[ngClass]="ngClassObj"

answered Oct 7, 2020 at 7:58

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

Collectives™ on Stack Overflow

Angular 10 | Add class name as variable to ngClass

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related