title: preset and reset mat-datepicker in Angular 5
body: <p>In my Angular 5 app I use the DatePicker from the Material Design (mat-datepicker). The default behavior of the datepicker works, but I have no way to preset a date and reset it in the associated input element.  Could anyone help?   Thanks. The datepicker resides in another containing component (snippet 1).  </p>
  
  <p><strong>Snippet 1 (containing page):</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col col-md-4 col-sm-4"&gt;
      &lt;matDatepicker [initDate]="newVisitDate" (newDatePickedEvent)="setNewVisitDate($event)"&gt;&lt;/matDatepicker&gt;
    &lt;/div&gt;
    &lt;div class="col col-md-3 col-sm-3"&gt;
      &lt;input [ngModel]="newVisitDate | date:'MM/dd/yyyy'" (ngModelChange)="setNewVisitDate($event)" class="form-control" type="date" name="newVisitDate" id="newVisitDate" #newVisitDateVar="ngModel" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Snippet 2 (mat-datepicker.html):</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="datepicker-container"&gt;
    &lt;mat-form-field&gt;
      &lt;input disabled matInput [matDatepicker]="pickedDate" (dateChange)="newDatePicked($event)" placeholder="New Visit Date" id="matSelectedDate"&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="pickedDate"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker disabled="false" #pickedDate [startAt]="someDate"&gt;&lt;/mat-datepicker&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Snippet 3 (mat-datepicker.ts):</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Component,
    Output,
    EventEmitter,
    Input,
    OnInit
  } from '@angular/core';
  import {
    MatDatepickerInputEvent
  } from '@angular/material';
  
  /** @title Basic datepicker */
  @Component({
    selector: 'matDatepicker',
    templateUrl: 'mat-datepicker.html',
    styleUrls: ['mat-datepicker.css']
  })
  export class matDatepickerComponent implements OnInit {
    @Input() initDate: Date;
    @Output() newDatePickedEvent: EventEmitter &lt;Date&gt; = new EventEmitter();
    someDate: Date;
  
    ngOnInit() {
      if (this.initDate === undefined) {
        this.someDate = new Date();
        console.log('matDatepicker.ngOnInit.initDate(using new Date())=', this.someDate);
      } else {
        this.someDate = this.initDate;
        console.log('matDatepicker.ngOnInit.initDate(using @input)=', this.someDate);
      }
    }
  
    newDatePicked(event: MatDatepickerInputEvent &lt;Date&gt; ): void {
      console.log('emitting matDatepickerCompont.newDatePicked()', event.value);
      this.newDatePickedEvent.emit(event.value);
    }
  }</code></pre>
  </div>
  </div>
  </p>