Directives can become disconnected in several ways:

• When the DOM tree the directive is contained in is removed from the DOM
• When the directive's host element is disconnected
• When the expression that produced the directive no longer resolves to the same directive.

When AsyncDirectives are disconnected, their disconnected callback is called. Async directives should implement disconnected to unsubscribe from async callbacks so that the directive can be garbage collected. Internally, directives hold references to the underlying DOM they are associated with, so failing to unsubscribe disconnected directives can lead to memory leaks.

Add a method that stops the timer:

  ensureTimerStopped() {
    clearInterval(this.timer);
    this.timer = undefined;
  }

Add the disconnected callback, and call our ensureStopped() callback since we don't want that running if the directive is no longer in use:

  disconnected() {
    this.ensureTimerStopped();
  }

Finally, implement the reconnected callback.

If a directive instance has been disconnected, it is possible for that same instance to be reconnected if the DOM it was rendered into is subsequently reconnected. This can happen when DOM is removed and cached for later use, or when a host element is moved, causing a disconnection and reconnection.

Here, we'll just re-start the timer using our ensureTimerStarted method:

  reconnected() {
    this.ensureTimerStarted();
  }