Angular 4 - Conditional CSS Classes

Question

I'm working on an Angular 4 app, where we present the user with a login. The login may fail, and on return, we listen for the error:-

.subscribe(error => {
            this.error = error;
        });

This shows fine and we show this:-

<div *ngIf="error">
   <p class="error-message">{{ error.ExceptionMessage }}</p>
</div>

Above this is a standard input field for username and password with a class. I wanted to be able to add an error class to this without doing the following:-

<div *ngIf="error">
    <input type="email" class="form-control" />
</div>
<div *ngIf="!error">
    <input type="email" class="form-control error-field" />
</div>

Is there a better way than rendering the input twice, on each side of the if?

Thanks!

Poul Kruijt · Accepted Answer · 2017-07-12 15:01:43Z

19

You can do this using the class binding:

<input type="email" class="form-control" [class.error-field]="error">

answered Jul 12, 2017 at 15:01

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Comments

samAlvin · Accepted Answer · 2017-07-12 15:01:13Z

13

yeah there's a better way using ngClass attribute like this:

<input type="email" [ngClass]="{'form-control': true, 'error-field': error}" />

answered Jul 12, 2017 at 15:01

samAlvin

1,6781 gold badge12 silver badges35 bronze badges

Comments

Sean Normoyle · Accepted Answer · 2017-07-12 15:01:04Z

2

I believe you are looking for NgClass or NgStyle: https://angular.io/api/common/NgClass https://angular.io/api/common/NgStyle

answered Jul 12, 2017 at 15:01

Sean Normoyle

314 bronze badges

Collectives™ on Stack Overflow

Angular 4 - Conditional CSS Classes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related