title: Angular 4 - Conditional CSS Classes
body: <p>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:-</p>
  
  <pre><code>.subscribe(error =&gt; {
              this.error = error;
          });
  </code></pre>
  
  <p>This shows fine and we show this:-</p>
  
  <pre><code>&lt;div *ngIf="error"&gt;
     &lt;p class="error-message"&gt;{{ error.ExceptionMessage }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Above this is a standard input field for username and password with a class. I wanted to be able to add an <code>error</code> class to this without doing the following:-</p>
  
  <pre><code>&lt;div *ngIf="error"&gt;
      &lt;input type="email" class="form-control" /&gt;
  &lt;/div&gt;
  &lt;div *ngIf="!error"&gt;
      &lt;input type="email" class="form-control error-field" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a better way than rendering the input twice, on each side of the if?</p>
  
  <p>Thanks!</p>