title: Angular 2 ngClass function
body: <p>Hi I was in the midst of creating a wizard/step component.
  How can I use the <code>ngClass</code> to return css classes based on <code>-&gt;</code>?</p>
  
  <p>I have 5 steps, let's say the user is in the 3rd step. All the previous steps should return a css class named <code>active</code> and the current step (step 3) returns css class <code>active</code> and all the steps after step 3 should return <code>inactive</code> css class.</p>
  
  <pre><code>&lt;div class="step actived"&gt;
                      &lt;span [ngClass]="displayActiveness()"&gt;Step 1
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="divider"&gt;&lt;/div&gt;
                  &lt;div class="step" [ngClass]="displayActiveness()"&gt;
                      &lt;span&gt;Step 2
                      &lt;/span&gt;
                  &lt;/div&gt;
  .....
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>displayActiveness(status) {
          if (this.statusSelected === 'step3') {
              return 'active';
          } else if (
          this.statusSelected === 'step4' || this.statusSelected === 'step5'){
              return 'inactive';
          }
          else if (
              this.statusSelected === 'step1' || this.statusSelected === 'step2'){
                  return 'actived';
              }
      }
  </code></pre>
  
  <p>I am stuck. Can someone please help me on this. Thanks in advance.</p>