Pfthb

Background:

I have a number of components in my Angular 6 application that are required to display the current time (hh:mm).

These were initially implemented using setInterval with this.now being bound in the view:

setInterval(() => 
 this.now = new Date();
, 1000);

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 setInterval outside of ngZone and manually triggering change detection if the minute has rolled over.

Question:

I'm trying to implement an observable stream of dates which emit a new value every minute. This is what I have do far...

timer(0, 1000)
 .pipe(
 map(() => new Date()),
 distinctUntilChanged((a: Date, b: Date) => a.getMinutes() === b.getMinutes()),
 tap(date => console.log(date))
 );

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 ngDoCheck to a component that subscribe).

How can I defer change detection so it only occurs when a new value is emitted?

You can use a subject and interval for this i guess maybe some way like this :

Basically in your code where you have implemented this(assuming it is a separate service : some.service.ts ) , define a subject like this :

someSubject : Subject<Date> = new Subject<Date>();

interval(1000)
 .pipe(
 map(() => new Date()),
 distinctUntilChanged((a: Date, b: Date) => a.getMinutes() === b.getMinutes()),
 tap(date => 
 console.log(date);
 this.someSubject.next(date);
 );
 ).subscribe();

Subscribe to the someSubject from wherever you want to listen to the date change like this :

this._someService.someSubject.subscribe((date : Date) =>
 console.log(date); //you'll have a new date object everytime your date object changes i.e everyminute
);

don't forget to import interval from rxjs

i have created an example(listen for every second change) using StackBlitz : https://stackblitz.com/edit/angular-4ytdbs