Angular 2 [attr.class] overwrites native DOM classes

Question

I have a variable containing a class name string:

classNameB = "class-B";

I want to add this class name to my own DOM element via [attr.class]:

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

Then angular overwrites the current DOM class class-A. What remains after the created element looks something like this:

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

What am I doing wrong here and how does it work?

PS: Can it be used [ngClass]instead and how?

Answer 1

So, I went through funny situations when I almost lacked options. In most cases, I use [ngClass], and that was fine so far:

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

Where

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

, ngClass:

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

. , . , , - .

Answer 2

[attr.class]='classNameB'

NameB $scope. . ,

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

ng-class .

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

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