title: How to change value of model in angular2?
body: <p><strong>EDIT 1</strong></p>
  
  <p>My code is:</p>
  
  <p><strong>Modal.ts</strong></p>
  
  <pre><code>import {Component, NgIf, FORM_DIRECTIVES} from 'angular2/angular2';
  
  declare function initMaterial();
  
  @Component({
      selector: 'modal',
      directives: [NgIf, FORM_DIRECTIVES],
      templateUrl: './frontend/components/modal/modal.html',
      styleUrls: ['./frontend/components/modal/modal.css']
  })
  
  export class Modal {
      public isOpen: boolean = false;
      public dtCompromise: Date;
  
      constructor() {
          this.dtCompromise = new Date();
      }
  
      open() {
          this.isOpen = true;
          initMaterial();
      }
  
      close() {
          this.isOpen = false;
      }
  }
  </code></pre>
  
  <p><strong>Modal.html</strong></p>
  
  <pre><code>&lt;div class="card-wide mdl-card mdl-shadow--2dp modal" *ng-if="isOpen"&gt;
      &lt;div class="mdl-card__title"&gt;
          &lt;h2 class="mdl-card__title-text"&gt;Novo compromisso&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="mdl-card__supporting-text"&gt;
          &lt;form action="#"&gt;
              &lt;div class="mdl-textfield mdl-js-textfield"&gt;
                  &lt;input class="mdl-textfield__input" type="date" [(ng-model)]="dtCompromise"/&gt;
                  &lt;label class="mdl-textfield__label" for="dtCompromisse"&gt;Data&lt;/label&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="mdl-textfield mdl-js-textfield"&gt;
                  &lt;textarea class="mdl-textfield__input" type="text" rows= "5" [(ng-model)]="dsCompromise"&gt;&lt;/textarea&gt;
                  &lt;label class="mdl-textfield__label" for="dsCompromisse"&gt;Descrição&lt;/label&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="mdl-card__actions mdl-card--border"&gt;
          &lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" (click)="save($event, dsCompromise, dtCompromise);"&gt;
              Salvar &lt;i class="material-icons"&gt;save&lt;/i&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="mdl-card__menu"&gt;
          &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="close()"&gt;
              &lt;i class="material-icons"&gt;close&lt;/i&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the constructor i tried initialize variable dtCompromise as <strong>this.dtCompromise = new Date();</strong>. But the value is undefined after this. Any sugestion for fix?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I discovered what's problem. Angular2 ignore input with type="date". After change type for text works for me. The problem now is. For use one field as date is necessary use datepicker. I use material-design-lite as framework responsive. This not contains datepicker for fix this. Will be necessary use the jquery datepicker. For me is the big anti-pattern. If you use angular2 this should promote full resource for development. I disappointed with it.</p>