title: Angular CLI project Bootstrap has-success or has-danger class not loading
body: <p>I have another question for the community, this one is simple. As previous questions, I'm working on Mr. Asim Hussain "Angular4 From Theory to Practice" book and ran into an issue with bootstrap .has-danger and .has-success classes not working. I installed bootstrap with </p>
  
  <pre><code>npm install bootstrap --save
  </code></pre>
  
  <p>Added the path to the bootstrap css in the .angular-cli.json</p>
  
  <pre><code>"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
     ],
  </code></pre>
  
  <p>And all seems to work well, the grid and form styles are loading well, no errors in the console. The issues comes when I implement the validation following the exercise, the form field border does not turn red or green as it should, here is my code</p>
  
  <pre><code>&lt;!-- One of the fields from the form --&gt;
   &lt;div class="form-group"
      [ngClass]="{
          'has-danger': f.form.controls.email?.invalid &amp;&amp; (f.form.controls.email?.dirty || f.form.controls.email.touched),
          'has-success': f.form.controls.email?.valid &amp;&amp; (f.form.controls.email?.dirty || f.form.controls.email.touched)
  
      }"&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type="email"
  
                 class="form-control"
                       name="email"
                       [(ngModel)]="model.email"
                       required
                       pattern="[^ @]*@[^ @]*"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Not sure why the bootstrap class is not turning the text field red or green as it should, can someone please help me figure this out?</p>