title: Angular Change Detection with Observable timer
body: <p><strong>Background:</strong></p>
  
  <p>I have a number of components in my Angular 6 application that are required to display the current time (hh:mm).</p>
  
  <p>These were initially implemented using <code>setInterval</code> with <code>this.now</code> being bound in the view:</p>
  
  <pre><code>setInterval(() =&gt; {
     this.now = new Date();
  }, 1000);
  </code></pre>
  
  <p>Naturally, this causes change detection to run every second which is wasteful given the value will only update once per minute. I can improve this by running the <code>setInterval</code> outside of <code>ngZone</code> and manually triggering change detection if the minute has rolled over.</p>
  
  <p><strong>Question:</strong></p>
  
  <p>I'm trying to implement an observable stream of dates which emit a new value every minute. This is what I have do far... </p>
  
  <pre><code>timer(0, 1000)
    .pipe(
      map(() =&gt; new Date()),
      distinctUntilChanged((a: Date, b: Date) =&gt; a.getMinutes() === b.getMinutes()),
      tap(date =&gt; console.log(date))
    );
  </code></pre>
  
  <p>A new date is emitted once per minute however subscribing to this stream causes Angular's change detection to run every second. (I confirmed this by adding a <code>ngDoCheck</code> to a component that subscribe).</p>
  
  <p>How can I defer change detection so it only occurs when a new value is emitted?</p>