Angular 4 display current time : <h1>What is the correct (canonical) way to display current time in angular 4 change detection system?</h1>

<p>The problem is as follows: current time changes constantly, each moment, by definition. But it is not detectable by Angular 4 change detection system. For this reason, in my opinion, it's necessary to explicitly call <code>ChangeDetectorRef::detectChanges</code>. However, in the process of calling this method, current time naturally changes its value. This leads to <code>ExpressionChangedAfterItHasBeenCheckedError</code>. In the following example (<a href="https://angular-tlpmtr.stackblitz.io" rel="noreferrer">see live</a>) this error appears withing a few seconds after loading the page:</p>

<pre><code>import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;
        {{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}&lt;br /&gt;{{ now }}`
})
export class AppComponent {
    get now() : string { return Date(); }
    constructor(cd: ChangeDetectorRef) {
        setInterval(function() { cd.detectChanges(); }, 1);
    }
}
</code></pre>
