javascript - Angular 2 [attr.class] overwrites native DOM classes - Stack Overflow

admin管理员组

文章数量:1384663

I have a variable holding my class name string:

classNameB = "class-B";

I want to add this class name to a native DOM element via [attr.class]:

<div class="class-A" [attr.class]='classNameB'></div>

Then, angular overwrites the current DOM class class-A. What has left after element created is something like:

<div class="class-B"></div>

What am I doing wrong here and how to work around on this?

PS: Can I use [ngClass] instead and how?

I have a variable holding my class name string:

classNameB = "class-B";

I want to add this class name to a native DOM element via [attr.class]:

<div class="class-A" [attr.class]='classNameB'></div>

Then, angular overwrites the current DOM class class-A. What has left after element created is something like:

<div class="class-B"></div>

What am I doing wrong here and how to work around on this?

PS: Can I use [ngClass] instead and how?

• javascript
• html
• angular

Share Improve this question Follow edited Oct 8, 2017 at 7:26 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Jul 16, 2016 at 11:49 Pho HuynhPho Huynh 1,57733 gold badges1313 silver badges2323 bronze badges 3

• 2 You could use ngClass directive find it here – Pankaj Parkar Commented Jul 16, 2016 at 12:07
• @PankajParkar Wow, I don't even know we can use ngClass instead of [ngClass]. Can you explain what is the different? – Pho Huynh Commented Jul 16, 2016 at 12:13
• 2 There is no difference. The [] is for all attribute and property bindings, not only for ngClass – Günter Zöchbauer Commented Jul 16, 2016 at 12:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

So I went through some funny situations where I almost ran out of options. Most of the time, I use [ngClass] and it was fine until:

<div class='native-class' [ngClass]='classNameHolder' [ngClass]='{"some-class": isSomeClass}'>

where,

classNameHolder: string = 'class-name-1';
isSomeClass: boolean = true;

I was stuck until I find good use of ngClass:

<div class='native-class' ngClass='{{classNameHolder}} {{isSomeClass ? "some-class" : ""}}></div>

And that's it. This is final option that I've been using from then. Hope it'll help if anyone runs into the same sitation.

[attr.class]='classNameB'

here the classNameB should be $scope attached variable. which can be an expression or value. you can also modify the code like this

[attr.class]='{{getClassName()}}'

for ng-class attribute it works same for both. or you can have a class on boolean basis

[attr.class]="'ifThis'?'classNameB':'classNameA'"

or

 ng-class="varA==0 ?'classNameB':'classNameA'"

本文标签： javascriptAngular 2 attrclass overwrites native DOM classesStack Overflow