title: Angular 2 "time ago" pipe
body: <p>I am trying to create a 'time ago' pipe for my Angular 2 application.</p>
  
  <p>It should transform a date to a string such as '5 minutes ago' or '60 seconds ago'. It works nicely so far, but it doesn't update after the first calculation. If the given date is for example 5 seconds ago, it displays '5 seconds ago' but never changes after that. </p>
  
  <p>I have already tried setting the pipes 'pure' value to false but that didn't help.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import {Pipe, PipeTransform} from 'angular2/core';
  
  @Pipe({
    name: 'messageTime',
    pure: false
  })
  export class MessageTimePipe implements PipeTransform {
    transform(value: Date, []): string {
      var result: string;
  
      // current time
      let now = new Date().getTime();
  
      // time since message was sent in seconds
      let delta = (now - value.getTime()) / 1000;
  
      // format string
      if (delta &lt; 10) {
        result = 'jetzt';
      } else if (delta &lt; 60) { // sent in last minute
        result = 'vor ' + Math.floor(delta) + ' Sekunden';
      } else if (delta &lt; 3600) { // sent in last hour
        result = 'vor ' + Math.floor(delta / 60) + ' Minuten';
      } else if (delta &lt; 86400) { // sent on last day
        result = 'vor ' + Math.floor(delta / 3600) + ' Stunden';
      } else { // sent more than one day ago
        result = 'vor ' + Math.floor(delta / 86400) + ' Tagen';
      }
  
      return result;
    }
  }
  </code></pre>
  
  <p>I'm using the filter like this:</p>
  
  <p>TypeScript:</p>
  
  <pre><code>import {Component, Input} from 'angular2/core';
  import {MessageTimePipe} from '../../pipes/message-time.pipe';
  
  @Component({
    selector: 'message-item',
    pipes: [MessageTimePipe],
    templateUrl: 'build/components/message-item/message-item.component.html'
  })
  export class MessageItemComponent {
    @Input()
    message: JSON;
  
    date: Date;
  
    ngOnInit() {
  
     this.date = new Date(2016, 3, 16, 12, 49, 10);
    }
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;p class="time"&gt;
    {{ date | messageTime }}
  &lt;/p&gt;
  </code></pre>