title: Angular 4 display current time
body: <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>