Angular Material: Keyboard navigation in Textarea possible but block all other keyboard events

Question

I want to have an Textarea which has the option to be either editable or not. If it is disabled than I would like to block all keyboard events but still be able to navigate through the field. I am aware that I could use something like HostListener or

<textarea matInput
            (keydown.ArrowDown)="navigate($event)"
            (keydown.ArrowUp)="navigate($event)"
...></textarea>

The problem I have with this approach is that

1. I have to list all valid keyevents individually - which are valid or not valid. Sounds like a very long list
2. Enable or disable seems little bit strange

Is there a shortcut to register navigation keys only? Or even better exists already a directive with this requirement?

Answer 1

Would this directive solve your problem:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appEnableNavigation]'
})
export class EnableNavigation {
  private scrollHeight = 200;   // 200px 
  private scrollWidth = 200;    // 200px 

  @HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (event.key === 'ArrowUp') {
      document.getElementById('text').scrollBy({ top: -this.scrollHeight, left: 0, behavior: 'smooth'});
    } else if (event.key === 'ArrowDown') {
      document.getElementById('text').scrollBy({ top: this.scrollHeight, left: 0, behavior: 'smooth'});
    } else if (event.key === 'ArrowLeft') {
      document.getElementById('text').scrollBy({ top: 0, left: -this.scrollWidth, behavior: 'smooth'});
    } else if (event.key === 'ArrowRight') {
      document.getElementById('text').scrollBy({ top: 0, left: this.scrollWidth, behavior: 'smooth'});
    }
  }

}

Template:

<textarea style="width:1000px; height:5000px" disabled appEnableNavigation id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quisque non tellus orci ac. Eleifend quam adipiscing vitae proin sagittis. Nisi est sit amet facilisis. Morbi tempus iaculis urna id volutpat. Duis tristique sollicitudin nibh sit amet commodo nulla. Sit amet porttitor eget dolor. Donec et odio pellentesque diam volutpat. Dignissim diam quis enim lobortis scelerisque. Volutpat lacus laoreet non curabitur gravida. Ornare suspendisse sed nisi lacus sed viverra tellus. In cursus turpis massa tincidunt dui ut ornare lectus sit. Malesuada proin libero nunc consequat. Amet luctus venenatis lectus magna fringilla.
.
.
.
Sodales ut eu sem integer vitae. Proin nibh nisl condimentum id venenatis. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Blandit aliquam etiam erat velit scelerisque in dictum. Enim sit amet venenatis urna cursus eget. Scelerisque eu ultrices vitae auctor eu augue. Aenean et tortor at risus viverra adipiscing at in. Vitae tortor condimentum lacinia quis vel eros donec. Quis auctor elit sed vulputate. Dignissim diam quis enim lobortis. Aenean euismod elementum nisi quis. Nunc non blandit massa enim nec dui nunc mattis.
</textarea>

Working example: Stackblitz