Detect key sequence using RxJS and Angular

Connie Leung - Nov 6 '22 - - Dev Community

Original Post: https://www.blueskyconnie.com/?p=5000

Introduction

This is day 12 of Wes Bos's JavaScript 30 challenge and I am going to use RxJS and Angular to detect key sequence. When user inputs the correct secret code, the application calls an external JavaScript library to render unicorns.

In this blog post, I describe how to use RxJS operators (scan, map, filter) to keep track of inputted keys. When the application detects that the key sequence matches the secret code, it calls cornify.js to render a unicorn at a random location.

Create a new Angular project in workspace

ng generate application day12-key-sequence-detection

Create Detect Key Sequence feature module

First, we create a KeySequenceDetection feature module and import it into AppModule. The feature ultimately encapsulates one component that is KeySequenceDetectionComponent.

Then, Import KeySequenceDetectionModule in AppModule

// key-sequence-detection.module.ts

@NgModule({
  declarations: [
    KeySequenceDetectionComponent,
  ],
  imports: [
    CommonModule
  ],
  exports: [
    KeySequenceDetectionComponent
  ]
})
export class KeySequenceDetectionModule { }

// app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    KeySequenceDetectionModule
  ],
  providers:[],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Declare component in feature module

In KeySequenceDetection feature module, we declare KeySequenceDetectionComponent to listen to window’s keyup event, compare keys against the secret code (wesbos) and display unicorn when a match is found.

src/app/key-sequence-detection
├── index.ts
├── key-sequence-detection
│   ├── key-sequence-detection.component.spec.ts
│   └── key-sequence-detection.component.ts
└── key-sequence-detection.module.ts
Enter fullscreen mode Exit fullscreen mode

In KeySequenceDetectionComponent, we define app selector, inline template and inline CSS styles. We will add the RxJS codes to implement the functions in later sections. For your information, is the tag of KeySequenceDetectionComponent.

import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { filter, fromEvent, map, scan, Subject, takeUntil  } from 'rxjs';

@Component({
  selector: 'app-key-sequence-detection',
  template: `
    <div><p>Type the secret code to display unicorn(s)!</p></div>
  `,
  styles: [`
    :host {
      display: block;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class KeySequenceDetectionComponent implements OnInit, OnDestroy {

  readonly secretCode = 'wesbos';
  constructor() { }

  ngOnInit(): void {}

  ngOnDestroy(): void {}
}
Enter fullscreen mode Exit fullscreen mode

Next, I delete boilerplate codes in AppComponent and render KeySequenceDetectionComponent in inline template.

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: '<app-key-sequence-detection></app-key-sequence-detection>',
  styles: [`
    :host {
      display: block;
    }
  `]
})
export class AppComponent {
  title = 'Day12 Key Sequence Detection';

  constructor(titleService: Title) {
    titleService.setTitle(this.title);
  }
}
Enter fullscreen mode Exit fullscreen mode

Add window service to listen to keyup event

In order to detect key sequence on native Window, I write a window service to inject to KeySequenceDetectionComponent to listen to keyup event. The sample code is from Brian Love’s blog post here.

// core/services/window.service.ts

import { isPlatformBrowser } from "@angular/common";
import { ClassProvider, FactoryProvider, InjectionToken, PLATFORM_ID } from '@angular/core';

/* Create a new injection token for injecting the window into a component. */
export const WINDOW = new InjectionToken('WindowToken');

/* Define abstract class for obtaining reference to the global window object. */
export abstract class WindowRef {
  get nativeWindow(): Window | Object {
    throw new Error('Not implemented.');
  }
}

/* Define class that implements the abstract class and returns the native window object. */
export class BrowserWindowRef extends WindowRef {

  constructor() {
    super();
  }

  override get nativeWindow(): Object | Window {
    return window;    
  }
}

/* Create an factory function that returns the native window object. */
export function windowFactory(browserWindowRef: BrowserWindowRef, platformId: Object): Window | Object {
  if (isPlatformBrowser(platformId)) {
    return browserWindowRef.nativeWindow;
  }
  return new Object();
}

/* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
const browserWindowProvider: ClassProvider = {
  provide: WindowRef,
  useClass: BrowserWindowRef
};

/* Create an injectable provider that uses the windowFactory function for returning the native window object. */
const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: windowFactory,
  deps: [ WindowRef, PLATFORM_ID ]
};

/* Create an array of providers. */
export const WINDOW_PROVIDERS = [
  browserWindowProvider,
  windowProvider
];
Enter fullscreen mode Exit fullscreen mode

Then, we provide WINDOW injection token in CoreModule and import CoreModule to AppModule.

// core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WINDOW_PROVIDERS } from './services/window.service';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: [WINDOW_PROVIDERS]
})
export class CoreModule { }

// app.module.ts

... other import statements ...
import { CoreModule } from './core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ... other imports ...
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Detect key sequence using RxJS

Now, I am going to apply RxJS to implement keyup event in KeySequenceDetectionComponent

I take step-by-step approach from declaring global JS library, token injection, creating subscription in ngOnInit and unsubscribing the subscription in ngOnDestroy.

Install and declare global JS library

First, I add script tag in the body of index.htm. I choose to add the JS script in the body because the application does not require it to execute immediately. The cornify.js library is needed when user types the correct secret code.

// index.html

<body>
  <app-root></app-root>
  <script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

Then, go back to KeySequenceDetectionComponent and declare a global variable of cornify.js at the top of the file.

The variable name is cornify_add to match the function name in the JS library.

// key-sequence-detection.component.ts

declare var cornify_add: any;
Enter fullscreen mode Exit fullscreen mode

Inject Window to KeySequenceDetectionComponent 

// key-sequence-detection.component.ts 

import { WINDOW } from '../../core';

destroy$ = new Subject<void>();

constructor(@Inject(WINDOW) private window: Window) { }
Enter fullscreen mode Exit fullscreen mode

At the same time, I initialize a destroy$ subject to unsubscribe the subscription at the end of the post.

Implement RxJS logic to detect key sequence in ngOnInit 

// key-sequence-detection.component.ts 

ngOnInit(): void {
    fromEvent(this.window, 'keyup')
      .pipe(
        filter(e => e instanceof KeyboardEvent),
        map(e => e as KeyboardEvent),
        scan((acc, e) => {
          acc.push(e.key);
          acc.splice(-this.secretCode.length - 1, acc.length - this.secretCode.length);
          return acc;
        }, [] as string[]),
        map(acc => acc.join('')),
        filter(inputtedCode => inputtedCode.includes(this.secretCode)),
        takeUntil(this.destroy$)
      )
      .subscribe(() => cornify_add());
}
Enter fullscreen mode Exit fullscreen mode
  • fromEvent(this.window, ‘keyup’) listens to window keyup event
  • filter(e => e instanceof KeyboardEvent) discards event that is not KeyboardEvent
  • map(e => e as KeyboardEvent) casts event to KeyboardEvent because filter operator only passes down KeyboardEvent
  • scan(….) accumulates keys in an array and return return last six keys
  • map(acc => acc.join(”)) concatenates array elements into a string
  • filter(inputtedCode => inputtedCode.includes(this.secretCode)) compares the input matches the secret code
  • takeUntil(this.destroy$) indicates the event stream continues until this.destroy$ subject completes
  • .subscribe(() => cornify_add()) shows a beautiful unicorn

Unsubscribe the subscription

After subscribing to a subscription in ngOnInit, I have to unsubscribe it in ngOnDestroy.

ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
}
Enter fullscreen mode Exit fullscreen mode

Finally, I have a browser window covered by mystical unicorns.

Final Thoughts

In this post, I show how to use RxJS and Angular to detect key sequence. The first takeaway is to create a window provider in core module and inject window in the component. The second takeaway is to declare a global var variable for the external JS library. The final takeaway is when subscription is created in ngOnInit, developers need to unsubscribe it in ngDestroy.

This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and other technologies.

Resources:

Image
A Glimpse Into Diagnosing ADHD's Secrets Of Diagnosing ADHD
Image
KM684000ALG-7L
Image
JavaScript topics

javascript, webdev, fullstack, beginners
Image
How Bifold Door Repairs Near Me Was The Most Talked About Trend Of 2024
Image
HEF4538BT
Image
MR750
Image
Responsible For The Lightweight Folding Wheelchairs For Travelling Budget? 10 Amazing Ways To Spend Your Money
Image
LM395TLM307H
Image
LM395T
Image
LM725CN
Image
Cat Flap Installation Into Glass
Image
DM7402N
Image
How to Train Your Cat to Use a Cat Flap
Image
MM80C97N
Image
Using a Cat Flap in Bifold Doors
Image
The Most Effective Advice You'll Ever Get About Bifold Door Seal Repair
Image
How To Explain Repairing Bifold Doors To A Five-Year-Old
Image
LM2675M-5.0
Image
Upgrading Your Application to Java 17: A Step-by-Step Guide for Developers

java, development, beginners, jakarta
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player