title: Automatically update display of relative time with Moment.js
body: <p>Given a list of items (think of it as a chat with multiple messages), I'd like to use <a href="/questions/tagged/moment.js" class="post-tag" title="show questions tagged &#39;moment.js&#39;" rel="tag">moment.js</a> to display the relative time (e.g. since creation) for each item.</p>
  
  <p>Each item has its own component and relative time is displayed using the following code:</p>
  
  <pre><code>get timeFromNow(): string {
    return moment(this.pageLoaded).fromNow(); // pageLoaded is a JS Date
  }
  </code></pre>
  
  <p>The issue is that the component won't update the display of relative time, since the original input (<code>pageLoaded</code> in the example above) won't change.</p>
  
  <p>My question is: is there a best practice for dealing with such a scenario? Currently, I'm using <code>markForCheck</code> of <code>ChangeDetectorRef</code> to trigger re-rendering. However, I'm not sure if this is a good method performance-wise.</p>
  
  <p>I've created a simple <a href="https://stackblitz.com/edit/angular-gn6nqv?file=src%2Fapp%2Fmoment.component.ts" rel="nofollow noreferrer">demo on Stackblitz</a>. In the demo, I use the aforementioned <code>markForCheck</code> to trigger the update.</p>