Capture keyboard at login


I am struggling with the following: I have login screen with a keyboard layout as a separate component (DIY - grid with boxes). The user can use tap or mouse to enter pin. But I also want keyboard support.

So I use the fromEvent rxjs to capture the document ‘keypress’ event in the keyboard component to do this. I subscribe in ngOnInit and unsubscribe in ngDestroy No the odd thing that happens is that the after login is completed and user navigates away, the component remains active and captures keyboard entries.

I tried flags, setTimeout and @input to capture disable flag by the login page to block it, but somehow I follow the wrong pattern as it keeps receiving input. And even after login or in other pages that use the keyboard component, do ANOTHER login!! Very undesireable.

At this moment I wonder if there is the opposite lifecycle hook of ngAfterViewInit available in Angular, which there isn’t by the documentation.

So, what would be the best pattern to follow in the keyboard component to monitor for keystrokes, but only when the component is shown?



Still no solution,

when checking presence of the component after navigation, there is something left in the DOM it seems. So DOM checking does not work, in terms of visibility. I am considering IntersectionObserver, that that I believe isn’t a great idea either…

So for now I decided to check the router.url, which is a hack, as I rather make the keyboard component agnostic of the route…