CODEWITHSUNDEEP
angular
Rijo
Rijo

Reputation: 3043

Angular ngClass not working while adding multiple condition

Adding multiple conditions on the [ngClass] is not working

a.component.html

 <div class="version-content" *ngFor="let version of versions; let lastVersion = last" [ngClass]="(version.isComingSoon === true) ? 'dashed': 'solid'">
            <div class="bubble" [ngClass]="endBubble : lastVersion, (version.isComingSoon === true) ? 'round': 'filled'">
</div>
 
        </div>

Code not working below

<div class="bubble" [ngClass]="endBubble : lastVersion, (version.isComingSoon === true) ? 'round': 'filled'">
    </div>

Upvotes: 0

Views: 187

Answers (2)

Barremian
Barremian

Reputation: 31125

You are mixing two different types of checks. You could either use same type of checks as shown by @Crocsx, or split them into two separate bindings. Try the following

<div class="bubble" [class.endBubble]="lastVersion" [ngClass]="version.isComingSoon ? 'round': 'filled'">
</div>

Upvotes: 1

Crocsx
Crocsx

Reputation: 7620

As the doc show =>

https://angular.io/api/common/NgClass

Those are the way to use ngClass =>

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

so it would be in array version, or you can use object version also.

<div class="bubble" [ngClass]="[lastVersion ? 'endBubble' : '', (version.isComingSoon === true) ? 'round': 'filled']">

Upvotes: 1

Related Questions