Angular 2 way of adding conditional classes to HTML tags

Question

I have this button:

<button class="btn btn-primary btn-sm" (click)="addSupplier(item)">Save</button>

I would like to add a class 'disabled' that will only applied when a certain condition is true, and will not apply when it is false.

What is the Angular 2 way of doing this? I came up with this approach using *ngIf but it's a ton of code:

<div *ngIf="item.productId && item.supplier">
    <button class="btn btn-primary btn-sm" (click)="addSupplier(item)">Save</button>
</div>
<div *ngIf="!item.productId || !item.supplier">
    <button class="btn btn-primary btn-sm disabled" (click)="addSupplier(item)">Save</button>
</div>

Possible duplicate of Assign classes conditionally in Angular2 — stakx - no longer contributing
– stakx - no longer contributing, Commented Mar 21, 2017 at 21:58
The answer provided here is different than the one at the link and I like it better. But the question is a duplicate. — etayluz
– etayluz, Commented Mar 21, 2017 at 21:59
I agree that is correctly marked as duplicate. But why are the answers irrelevant if they are different or better? — etayluz
– etayluz, Commented Mar 21, 2017 at 22:11
Again, there is no argument that this question is a duplicate and has been properly marked as such. But will users be able to continue to answer this question? As we have seen the answer that @Robin has provided here is better than the answer in the duplicate. This would actually suggest that asking a duplicate question can be a good thing for everyone. — etayluz
– etayluz, Commented Mar 21, 2017 at 22:22

Robin Dijkhof · Accepted Answer · 2017-03-21 21:56:17Z

2

<button class="btn btn-primary btn-sm" [class.disabled]="!item.productId || !item.supplier" (click)="addSupplier(item)">Save</button>

answered Mar 21, 2017 at 21:56

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

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

Comments

Pang · Accepted Answer · 2017-03-22 01:34:20Z

2

The good old ngClass is still available in Angular 2. You can give a try if you want.

[ngClass]="{'my-class': isClassVisible }"

edited Mar 22, 2017 at 1:34

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Mar 21, 2017 at 22:00

Kailash Ravuri

5910 bronze badges

Comments

yanbu · Accepted Answer · 2017-06-02 01:31:22Z

0

If you are simply trying to disable the button you may not need a css class, bind to [disabled] like [disabled]="disableButton"

answered Jun 2, 2017 at 1:31

yanbu

1838 bronze badges

Collectives™ on Stack Overflow

Angular 2 way of adding conditional classes to HTML tags

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related