title: Angular 2 - Add CSS class from Component event
body: <p>I'm using Angular 2 with TypeScript and MDL and have the following simple component. Basically it's an input with the button, and then a collection of spans underneath it. So you enter some "tag", then click the button, and the collection is updated.</p>
  
  <p>One issue is when I add the item to collection like this:</p>
  
  <pre><code>this.chips.push(this.chip);
  this.chip = '';
  </code></pre>
  
  <p>Then the input's value becomes blank (as wanted), but the "is-dirty" CSS MDL class on the parent div is not removed. So what I want to do is to simply remove the class from DIV element in Component's template.</p>
  
  <p>How do I query DOM in Angular2 and manipulate it (add/remove CSS classes)?
  I was trying to play with Renderer, but no luck so far.</p>
  
  <p>Note: I can't bind this "is-dirty" class because MDL javascript updates it manually, when text is being entered in the input.</p>
  
  <p>The code:</p>
  
  <pre><code>import {Component, View, Directive, Input, ElementRef, Renderer} from 'angular2/core'
  import {NgIf, NgFor} from 'angular2/common'
  
  @Component({
     selector: 'chipCollection'
  })
  @View({
     directives: [NgIf, NgFor],
     template: `
  &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
    &lt;input class="mdl-textfield__input" type="text" id="chip" [(ngModel)]="chip" (keyup.enter)="addChip()"&gt;
    &lt;label class="mdl-textfield__label" for="chip"&gt;{{ label }}&lt;/label&gt;
    &lt;label class="mdl-button mdl-js-button mdl-button--icon aa-mdl-input-button"&gt;
      &lt;i class="material-icons" (click)="addChip()"&gt;add&lt;/i&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div *ngIf="chips.length &gt; 0"&gt;
    &lt;span *ngFor="#chip of chips" class="aa-chip"&gt;{{ chip }}&lt;/span&gt;
  &lt;/div&gt;
  `
  })
  export class ChipCollection {
     @Input() chips: Array&lt;string&gt; = ["chip1", "chip2"];
     @Input() label: string;
     chip: string;
  
     private renderer: Renderer;
     private element: ElementRef;
  
     constructor(renderer: Renderer, element: ElementRef){
        this.renderer = renderer;
        this.element = element;
     }
  
     addChip() {
        if(this.chip) {
           this.chips.push(this.chip);
           this.chip = '';
           debugger; //testing here... 
           // what I need to do here is to find the DIV element and remove its "is-dirty" CSS class, any ideas?
           this.renderer.setElementClass(this.element.nativeElement, 'is-dirty', false);
        }
     }
  
  }
  </code></pre>
  
  <p>EDIT:
  Here are two "dirty" classes. I guess ng-dirty is added by ngModel. However I need to also remove parent's "is-dirty". I think it's MDL class.
  See screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/pfd59.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pfd59.jpg" alt="enter image description here"></a></p>