Skip to content

Commit

Permalink
fix(calender, timeAgo): automatic update broken
Browse files Browse the repository at this point in the history
The updates are done outside the Angular zone, so Angular can't tell it the pipe needs to be updated. Fix by calling `markForCheck()` inside the NgZone.
  • Loading branch information
urish committed Oct 6, 2016
1 parent 11bd7e0 commit d0dbc67
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 3 deletions.
3 changes: 3 additions & 0 deletions src/CalendarPipe.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ class NgZoneMock {
runOutsideAngular (fn: Function) {
return fn();
}
run(fn: Function) {
return fn();
}
};

describe('CalendarPipe', () => {
Expand Down
4 changes: 3 additions & 1 deletion src/CalendarPipe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ export class CalendarPipe implements PipeTransform, OnDestroy {
// values such as Today will need to be replaced with Yesterday after midnight,
// so make sure we subscribe to an EventEmitter that we set up to emit at midnight
this._ngZone.runOutsideAngular(() =>
this._midnightSub = CalendarPipe._midnight.subscribe(() => this._cdRef.markForCheck()));
this._midnightSub = CalendarPipe._midnight.subscribe(() => {
this._ngZone.run(() => this._cdRef.markForCheck());
}));
}

transform(value: Date | moment.Moment, ...args: any[]): any {
Expand Down
3 changes: 3 additions & 0 deletions src/TimeAgoPipe.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ class NgZoneMock {
runOutsideAngular (fn: Function) {
return fn();
}
run(fn: Function) {
return fn();
}
};

describe('TimeAgoPipe', () => {
Expand Down
6 changes: 4 additions & 2 deletions src/TimeAgoPipe.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* angular2-moment (c) 2015, 2016 Uri Shaked / MIT Licence */

import {Pipe, ChangeDetectorRef, PipeTransform, OnDestroy, NgZone} from '@angular/core';
import { Pipe, ChangeDetectorRef, PipeTransform, OnDestroy, NgZone } from '@angular/core';
import * as moment from 'moment';

// under systemjs, moment is actually exported as the default export, so we account for that
Expand All @@ -19,7 +19,9 @@ export class TimeAgoPipe implements PipeTransform, OnDestroy {
const timeToUpdate = this._getSecondsUntilUpdate(momentInstance) * 1000;
this._currentTimer = this._ngZone.runOutsideAngular(() => {
if (typeof window !== 'undefined') {
return window.setTimeout(() => this._cdRef.markForCheck(), timeToUpdate);
return window.setTimeout(() => {
this._ngZone.run(() => this._cdRef.markForCheck());
}, timeToUpdate);
}
});
return momentConstructor(value).from(momentConstructor(), omitSuffix);
Expand Down

0 comments on commit d0dbc67

Please sign in to comment.