How to create keyboard shortcuts with Angular?

Issue

I'm having trouble trying to find a way to create keyboard shortcuts with it. I mean, where and how can I code something like ctrl + t increases font size of the site?

Solution

Of course this can be accomplished with vanilla javascript, but Angular has the @HostListener decorator to make listening for events simpler: https://angular.io/api/core/HostListener

You put the decorator over a component's function to add an event listener that executes the function on an event.

Don't use ctrl + t though, that's "new tab" for all browsers, and I don't believe you can override it.

To listen for ctrl + b on the entire window it would be like this:

  @HostListener('window:keydown.control.b', ['$event'])
  bigFont(event: KeyboardEvent) {
    event.preventDefault();
    document.body.style.fontSize = '32px';
  }

event.preventDefault() prevents any default browser actions caused by the event, if possible.

Stackblitz: https://stackblitz.com/edit/angular-ivy-2rhyep?file=src/app/app.component.ts

Note: the listeners are cleaned up if the enclosing component is destroyed.

Answered By - Chris Hamilton