“Expression has changed after it was checked” #84

src/time-ago.pipe.spec.ts

@@ -2,6 +2,10 @@ import 'es6-shim';
 import 'reflect-metadata';
 import {NgZone} from '@angular/core';
 import {TimeAgoPipe} from './time-ago.pipe';
+import * as moment from 'moment';
+
+// under systemjs, moment is actually exported as the default export, so we account for that
+const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;
 
 class NgZoneMock {
   runOutsideAngular (fn: Function) {
@@ -38,6 +42,31 @@ describe('TimeAgoPipe', () => {
       expect(changeDetectorMock.markForCheck).toHaveBeenCalled();
     });
 
+    it('should update the text with a new date instance different from the previous one', () => {
+      const changeDetectorMock = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck']);
+      const pipe = new TimeAgoPipe(changeDetectorMock, new NgZoneMock() as NgZone);
+      jasmine.clock().mockDate(new Date('2016-01-01'));
+      expect(pipe.transform(new Date())).toBe('a few seconds ago');
+      expect(pipe.transform(new Date(0))).toBe('46 years ago');
+      expect(pipe.transform(moment())).toBe('a few seconds ago');
+      expect(pipe.transform(moment(0))).toBe('46 years ago');
+    });
+
+    it('should update the text when the date instance time is updated', () => {
+      const changeDetectorMock = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck']);
+      const pipe = new TimeAgoPipe(changeDetectorMock, new NgZoneMock() as NgZone);
+      jasmine.clock().mockDate(new Date('2016-01-01'));
+      let date = new Date();
+      expect(pipe.transform(date)).toBe('a few seconds ago');
+      date.setFullYear(2000);
+      expect(pipe.transform(date)).toBe('16 years ago');
+
+      let dateAsMoment = moment();
+      expect(pipe.transform(dateAsMoment)).toBe('a few seconds ago');
+      dateAsMoment.year(2000);
+      expect(pipe.transform(dateAsMoment)).toBe('16 years ago');
+    });
+
     it('should remove all timer when destroyed', () => {
       const changeDetectorMock = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck']);
       const pipe = new TimeAgoPipe(changeDetectorMock, new NgZoneMock() as NgZone);

src/time-ago.pipe.ts

@@ -1,35 +1,63 @@
 /* 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
 const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;
 
-@Pipe({ name: 'amTimeAgo', pure: false })
+@Pipe({name: 'amTimeAgo', pure: false})
 export class TimeAgoPipe implements PipeTransform, OnDestroy {
   private currentTimer: number;
 
+  private lastTime: Number;
+  private lastValue: Date | moment.Moment;
+  private lastOmitSuffix: boolean;
+  private lastText: string;
+
   constructor(private cdRef: ChangeDetectorRef, private ngZone: NgZone) {
   }
 
   transform(value: Date | moment.Moment, omitSuffix?: boolean): string {
-    const momentInstance = momentConstructor(value);
+    if (this.hasChanged(value, omitSuffix)) {
+      this.lastTime = this.getTime(value);
+      this.lastValue = value;
+      this.lastOmitSuffix = omitSuffix;
+      this.removeTimer();
+      this.createTimer();
+      this.lastText = momentConstructor(value).from(momentConstructor(), omitSuffix);
+
+    } else {
+      this.createTimer();
+    }
+
+    return this.lastText;
+  }
+
+  ngOnDestroy(): void {
     this.removeTimer();
+  }
+
+
+  private createTimer() {
+    if (this.currentTimer) {
+      return;
+    }
+    const momentInstance = momentConstructor(this.lastValue);
+
     const timeToUpdate = this.getSecondsUntilUpdate(momentInstance) * 1000;
     this.currentTimer = this.ngZone.runOutsideAngular(() => {
       if (typeof window !== 'undefined') {
         return window.setTimeout(() => {
+          this.lastText = momentConstructor(this.lastValue).from(momentConstructor(), this.lastOmitSuffix);
+
+          this.currentTimer = null;
           this.ngZone.run(() => this.cdRef.markForCheck());
         }, timeToUpdate);
       }
     });
-    return momentConstructor(value).from(momentConstructor(), omitSuffix);
   }
 
-  ngOnDestroy(): void {
-    this.removeTimer();
-  }
 
   private removeTimer() {
     if (this.currentTimer) {
@@ -50,4 +78,18 @@ export class TimeAgoPipe implements PipeTransform, OnDestroy {
       return 3600;
     }
   }
+
+  private hasChanged(value: Date | moment.Moment, omitSuffix?: boolean) {
+    return this.getTime(value) !== this.lastTime || omitSuffix !== this.lastOmitSuffix;
+  }
+
+  private getTime(value: Date | moment.Moment) {
+    if (moment.isDate(value)) {
+      return value.getTime();
+    } else if (moment.isMoment(value)) {
+      return value.valueOf();
+    } else {
+      return momentConstructor(value).valueOf();
+    }
+  }
 }