Angular2 - trouble using ng2-idle EventTargetInterruptSource in component to create multiple instances

Question

I have an Angular2 project that has 2 instances of a component (DisplayAreaComponent) on the screen. I would like each DisplayAreaComponent instance to have its own Idle instance (which is allowed according to the README), so I am injecting Idle in the component constructor and then using EventTargetInterruptSource for the interrupt source. However, the interrupt source isn't responding to my mouse clicks, which makes me think I set something up incorrectly.

AppModule:

... 
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  NgIdleModule.forRoot()
],
...

DisplayAreaComponent constructor:

  constructor(
      private element: ElementRef,
      private idle: Idle
  )
  {
    // give the idle instance a unique name
    idle.setIdleName("display-area-" + this.displayId);

    // sets an idle timeout of 5 seconds, for testing purposes.
    idle.setIdle(5);

    // clears the timeout
    idle.setTimeout(0);

    // sets the interrupts for this component, in this case, things like clicks, scrolls, touches to the document
    idle.setInterrupts([new EventTargetInterruptSource(this.element.nativeElement, "mousedown touchstart")]);

    idle.onIdleStart.subscribe(() => this.idleStartHandler());
    idle.onIdleEnd.subscribe(() => this.idleEndHandler());

Any ideas what I'm doing wrong?

Answer 1

I guess you are having

idle.watch()

function call missing.