title: How do I *save* the results of an angular material modal dialog?
body: <p>I have a component which opens a modal dialog to let the user input two dates. I would then like to save those two dates to a db model behind the component, but I am having trouble wrapping my head around when and where to obtain those results.</p>
  
  <p>To be clear: I can currently see the dialog result as two dates in my main component's template, but I would like to know, in...some method...in my main component, when the dialog is closed and the dates are no longer nulls -- so I can save them to the DB.</p>
  
  <p>My main component template has a button with an onClick event:</p>
  
  <pre><code>&lt;a class="btn btn-sm role="button"&gt;&lt;mat-icon title="Get Dates" (click)="onClickGetDates(appt)"&gt;flag&lt;/mat-icon&gt;&lt;/a&gt; Result from dialog: {{ dateRangeArray }}
  </code></pre>
  
  <p>The main component implements the onClick event:</p>
  
  <pre><code>onClickGetDates(appt) {
      this.dialogService
        .confirmDateRange('Get Dates', 'Enter two dates:',
          appt.beginDate, appt.endDate)
        .subscribe(res =&gt; this.dateRange = res);
  .
  .
  // I would like to now save the dateRange result to my database, but at this point, result is [null,null], so the code below does nothing (except null out the dates):
  appt.beginDate = dateRange[0];
  appt.endDate = dateRange[1];
  this.apptdata.updateAppt(appt);
  }
  </code></pre>
  
  <p>Here is confirmDateRange, defined in a Dialog Service, which actually displays the dialog:</p>
  
  <pre><code>public confirmDateRange(title: string, message: string, begin: Date, end: Date): Observable&lt;boolean&gt; {
      let dialogRef: MatDialogRef&lt;ConfirmDialogComponent&gt;;
  
      dialogRef = this.dialog.open(ConfirmDialogComponent);
      dialogRef.componentInstance.title = title;
      dialogRef.componentInstance.message = message;
      dialogRef.componentInstance.beginDate = begin;
      dialogRef.componentInstance.endDate = end;
  
      return dialogRef.afterClosed();
    }
  </code></pre>
  
  <p>And the dialog component:</p>
  
  <pre><code>export class ConfirmDialogComponent implements OnInit {
  
    public title: string;
    public message: string;
  
    public beginDate: Date;
    public endDate: Date;
  
    constructor(public dialogRef: MatDialogRef&lt;ConfirmDialogComponent&gt;) { }
  
    ngOnInit() {
    }
  </code></pre>
  
  <p>And the dialog's template:</p>
  
  <pre><code>&lt;h2&gt;{{ title }}&lt;/h2&gt;
  &lt;hr&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  
  &lt;!--Date Picker Begin--&gt;
  
  &lt;mat-form-field&gt;
    &lt;input matInput [matDatepicker]="beginDatePicker" placeholder="Beginning" [(ngModel)]="beginDate"&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="beginDatePicker"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #beginDatePicker&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  
  
  &lt;!--Date Picker End--&gt;
  
  &lt;mat-form-field&gt;
    &lt;input matInput [matDatepicker]="endDatePicker" placeholder="Ending" [(ngModel)]="endDate"&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="endDatePicker"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #endDatePicker&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  
  
  &lt;!--OK--&gt;
  &lt;button type="button" mat-raised-button
          (click)="dialogRef.close([beginDate, endDate])"&gt;OK&lt;/button&gt;
  
  &lt;!--Cancel--&gt;
  &lt;button type="button" mat-button
          (click)="dialogRef.close()"&gt;Cancel&lt;/button&gt;
  </code></pre>
  
  <p>After clicking OK in the dialog, I can see the resultant array with the two dates in the main component's template like this: <code>Result from dialog: {{ dateRangeArray }}</code>. Trying to access the same result in onClickGetDates is 'too soon' and the result is a null array...So, where/when is the proper place to see that result in my main component?</p>
  
  <p>I feel like I'm mis-using the dialog's AfterClose() event, and that I should be able to retrieve results just after that event is fired, but I'm still too green with Angular to realize what I'm doing wrong.</p>