title: Angular 2 changing class with ngClass
body: <p>In html I want to change the css of a span. To do this I use the ngClass function of Angular 2 by applying the following setup:</p>
  
  <p><strong>app.components.ts</strong></p>
  
  <pre><code>import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from "angular2/common";
  
  export class AppComponent {
  public isOn = true;
  public toggle(newState) {
      console.log("newState: "+newState);
        this.isOn = newState;
      };
  }
  </code></pre>
  
  <p><strong>In my html fileI have</strong></p>
  
  <pre><code>&lt;span class="glyphicon glyphicon-plus-sign" [ngClass]="{'glyphicon glyphicon-minus-sign': isOn}" (click)="toggle(!isOn)"&gt;&lt;/span&gt;&lt;span&gt; Child&lt;/span&gt;
  </code></pre>
  
  <p>When I load my webpage the icon looks correct (minus sign). However, the chrome inspector show the following css:</p>
  
  <pre><code>&lt;span class="glyphicon glyphicon-plus-sign glyphicon-minus-sign"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>And after I click the span no icon is shown at all and the chrom inspector shows the following css:</p>
  
  <pre><code>&lt;span class="glyphicon-plus-sign"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The issue here is that it should display the plus icon, but instead it shows no icon at all. My quess is that the above code does not replace the existing, but just adds another class and as a result the icon is not replaced, but no icon is shown at all? How can I replace the class of the span so that the plus icon is shown?</p>