06

The timer callback should update the value rendered by the directive -- but notice the timer callback fires outside of the normal directive update/render lifecycle where we normally return a value for the directive to render.

We can use AsyncDirective's setValue API to update the result of the directive that is rendered into the template, outside of the directive's normal update cycle.

In our case, we need to reference the time argument from our timer callback. To make the user's time argument available outside of update, store it in another class field:

{% switchable-sample %}

  time!: Date;

  update(part: Part, [time]: DirectiveParameters<this>) {
    this.time = time;
    ...
  }

  update(part, [time]) {
    this.time = time;
    ...
  }

{% endswitchable-sample %}

And then in our timer callback, we can call setValue, using our render result, which will re-format the date using the currently elapsed time.

        this.setValue(this.render(this.time));

Congratulations! If you wait a few seconds, you should now see time rendered using the directive update periodically, using the timeago library's rules for incrementally scaling from "just now" to "seconds ago" to "minutes ago", etc..

{% aside "warn" %}

This implementation contains a memory leak.

While the directive would work, there is a potential memory leak – if the element were to be disconnected from the DOM, the timer would keep on firing and holding on to the directive and references to the underlying DOM.

{% endaside %}

Next, we'll add lifecycle for cleaning up the directive when it's no longer needed.