Ufdjrw

I want to create a service which detects all keyboard input, translates the key strokes into actions based on a configurable mapping, and exposes observables which various elements can bind to to react to specific key presses.

The following is a simplification of my code so far, it worked when HostListener was in a component, but now I've moved it into a service it never fires even though it is definitely initialised. Is it not possible to detect input like this in a service?

import Injectable, HostListener from '@angular/core';

import Subject from 'rxjs/Subject';

@Injectable()
export class InputService 

 @HostListener('window:keydown', ['$event'])
 keyboardInput(event: any) 
 console.log(event);
 

Seems like its not possible to use it in a service.

You have to use the old way window.addEventListener like @yurzui pointed already.

https://plnkr.co/edit/tc53cvQDfLHhaR68ilKr?p=preview

import Component, NgModule, HostListener, Injectable from '@angular/core'
import BrowserModule from '@angular/platform-browser'

@Injectable()
export class MyService 

 constructor() 
 window.addEventListener('keydown', (event) => 
 console.dir(event);
 );
 



@Component(
 selector: 'my-app',
 template: `
 <div>
 <h2>Hello name</h2>
 </div>
 `,
)
export class App 

 constructor(private _srvc: MyService) 
 this.name = 'Angular2'
 


@NgModule(
 imports: [ BrowserModule ],
 declarations: [ App ],
 providers: [MyService],
 bootstrap: [ App ]
)
export class AppModule 

There is an other way of doing so, by using rendererFactory2 and renderer2.
I am using such a service to monitor idleness and logout the user accordingly.
Here is part of the code :

@Injectable()
export class IdleService 

 renderer: Renderer2;
 lastInteraction: Date = new Date();
 definedInactivityPeriod = 10000;

 constructor(
 private rendererFactory2: RendererFactory2,
 private auth: AuthService,
 private router: Router
 ) 
 this.renderer = this.rendererFactory2.createRenderer(null, null);
 this.renderer.listen('document', 'mousemove', (evt) => 
 console.log('mousemove');
 this.lastInteraction = new Date();
 );
 // Subscribing here for demo only
 this.idlePoll().subscribe();
 

 idlePoll() 
 return interval(1000)
 .pipe(
 tap(() => console.log('here', new Date().getTime() - this.lastInteraction.getTime())),
 takeWhile(() => 
 if ((new Date().getTime() - this.lastInteraction.getTime()) > this.definedInactivityPeriod) 
 this.auth.logout(); 
 
 return (new Date().getTime() - this.lastInteraction.getTime()) < this.definedInactivityPeriod;
 )
 );
 

By passing null to renderer factory this.rendererFactory2.createRenderer(null, null) you get a hold of the default DOMrenderer and can therefore listen to window events.