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.

One issue is when I add the item to collection like this:

this.chips.push(this.chip);
this.chip = '';

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.

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.

Note: I can't bind this "is-dirty" class because MDL javascript updates it manually, when text is being entered in the input.

The 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: `
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="chip" [(ngModel)]="chip" (keyup.enter)="addChip()">
  <label class="mdl-textfield__label" for="chip">{{ label }}</label>
  <label class="mdl-button mdl-js-button mdl-button--icon aa-mdl-input-button">
    <i class="material-icons" (click)="addChip()">add</i>
  </label>
</div>
<div *ngIf="chips.length > 0">
  <span *ngFor="#chip of chips" class="aa-chip">{{ chip }}</span>
</div>
`
})
export class ChipCollection {
   @Input() chips: Array<string> = ["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);
      }
   }

}

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: