Angular CLI Observable Pipe

Question

Im trying to create a pipe that takes a date time stamp and returns how long it has been since that time.

I have the following pipe which returns the duration once, but I need this pipe to increment every second to give a timer effect:

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

@Pipe({ name: 'duration' })
export class DurationPipe implements PipeTransform{
  transform(value: any){
    var now = moment(new Date());
    var end = moment(value);
    var dif = moment.duration(now.diff(end));
    var toReturn = [];
    if(("00" + dif.hours()).slice(-2) != "00"){
      toReturn[toReturn.length] = ("00" + dif.hours()).slice(-2);
    }
    toReturn[toReturn.length] = ("00" + dif.minutes()).slice(-2);
    toReturn[toReturn.length] = ("00" + dif.seconds()).slice(-2);
    return toReturn.join(':');
  }
}

I've looked at the async pipe but I cant seem to get it working how I desire.

Any solutions?

Answer 1

The Pipe component pass value from the template and transform a new value out. You shouldn't use Pipe to calculate a time duration and update to the view periodically because Pipe won't update itself unless value changed. ( Pipes are all pure pipe by default! )

I think you should implement this into your component instead of implement this in Pipe.

Answer 2

Taking inspiration from the comment left from @Hinrich

I decided to pass in the current time to the pipe. Changing this value would trigger the pipe to change. This allows the logic of calculating the difference in two times to be reused throughout my app.

To get this to appear as a timer I set a timeout function that updates the current time argument in the component where the pipe is being used

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

@Pipe({ name: 'duration'})
export class DurationPipe implements PipeTransform{
  transform(value: any, now: any){
    var end = moment(value);
    var dif = moment.duration(now.diff(end));
    var toReturn = [];
    if(("00" + dif.hours()).slice(-2) != "00"){
      toReturn[toReturn.length] = ("00" + dif.hours()).slice(-2);
    }
    toReturn[toReturn.length] = ("00" + dif.minutes()).slice(-2);
    toReturn[toReturn.length] = ("00" + dif.seconds()).slice(-2);
    return toReturn.join(':');
  }
}

then in the component

@Component({
  moduleId: module.id,
  templateUrl: 'pending.template.html',
  styleUrls: ['../orders.scss']
})

export class PendingComponent implements OnInit {

  orders: any[];
  now = moment(new Date());

  constructor(private route: ActivatedRoute, private router: Router, private orderService: OrderService, public dialog: MdDialog ){}

  ngOnInit() {
    Observable.interval(1000).subscribe(x=>{
      this.now = moment(new Date());
    })
  }
}

with the html being

{{order.createdAt | duration:now}}