Ionic/Angular 2 component event emitter not updating view
<p>I am currently writing an Ionic 2 app and have created the following custom component:</p>

<pre><code>import {Component, EventEmitter} from 'angular2/core';
import {Button, Icon, Item} from 'ionic-angular';
import {DatePicker} from 'ionic-native';
import {HSDatePipe} from '../pipes/custom-dateformat.pipe';

@Component({
    selector: 'date-picker',
    directives: [Button, Icon, Item],
    inputs: ['date', 'dateFormat', 'mode'],
    outputs: ['onUpdate'],
    pipes: [HSDatePipe],
    template: `&lt;button clear (click)="selectDate()"&gt;
        {{date | hsDate:dateFormat}}
    &lt;/button&gt;`
})
export class HSDatePicker {

    date:any;
    dateFormat:any;
    label:string;
    mode:string;
    onUpdate:any = new EventEmitter();

    constructor() {
    }

    selectDate() {
        let self:any = this;
        let previousDate:any = self.date;

        DatePicker.show({
            date: new Date(self.date),
            mode: self.mode
        })
        .then(
            (date:any) =&gt; {
                if (!date) {
                    date = previousDate;
                }
                self.onUpdate.emit(date);
            },
            err =&gt; {
                console.log('error -', err);
            }
        );
    }

}
</code></pre>

<p>On the page calling this component, I include it in the page like so:</p>

<pre><code>&lt;date-picker item-right [date]="period.dateEnd" [dateFormat]="'HH:mm'" [mode]="'time'" (onUpdate)="dateChange($event, 'dateEnd')"&gt;&lt;/date-picker&gt;
</code></pre>

<p>The <code>dateChange</code> function looks like this:</p>

<pre><code>dateChange(e, selector) {
    let newDate = moment(e);
    this.transactionFilter[selector] = newDate;
}
</code></pre>

<p>When I use the component to select a new date, the function is called as I would expect, and the transactionFilter object is updated. However, the view doesn't update and it still displays the old date on the page until I click a button, or focus an input etc.</p>

<p>I think the problem is to do with the DatePicker plugin or promises, because if I change the <code>selectDate()</code> function like so, it updates fine.</p>

<pre><code>selectDate() {
    let self:any = this;
    self.onUpdate.emit(new Date());
}
</code></pre>

<p>Is there a way to force the view to update or should I do it differently somehow?</p>

<p>Thanks for any help.</p>

<p>Edit: Template for the main page</p>

<pre><code>@Page({
    template: `
    &lt;ion-content&gt;
        &lt;ion-toolbar primary class="subheader"&gt;
            &lt;ion-title&gt;Transaction Viewer Filter&lt;/ion-title&gt;
        &lt;/ion-toolbar&gt;
        &lt;ion-list&gt;
            &lt;ion-item&gt;
                &lt;ion-icon name="calendar" item-left&gt;&lt;/ion-icon&gt;
                From
                &lt;date-picker item-right [date]="transactionFilter.fromDate" [dateFormat]="'DD/MM/YYYY HH:mm'" [mode]="'datetime'" (onUpdate)="dateChange($event, 'fromDate')"&gt;&lt;/date-picker&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-icon name="calendar" item-left&gt;&lt;/ion-icon&gt;
                To
                &lt;date-picker item-right [date]="transactionFilter.toDate" [dateFormat]="'DD/MM/YYYY HH:mm'" [mode]="'datetime'" (onUpdate)="dateChange($event, 'toDate')"&gt;&lt;/date-picker&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                Count: {{count}}
            &lt;/ion-item&gt;
        &lt;/ion-list&gt;
        &lt;ion-row&gt;
            &lt;ion-col&gt;
                &lt;button class="close-modal" (click)="close()" danger block&gt;Close&lt;/button&gt;
            &lt;/ion-col&gt;
            &lt;ion-col&gt;
                &lt;button class="save-modal" (click)="save()" favorite block&gt;Save&lt;/button&gt;
            &lt;/ion-col&gt;
        &lt;/ion-row&gt;
    &lt;/ion-content&gt;`,
    directives: [HSDatePicker]
})
</code></pre>