[Angular] Adding keyboard events to our control value accessor component

div tabindex="0" >

 

Add some css class for foucs:

      <div
        [class.focus]="focused"
        tabindex="0"
        (focus)="onFocus($event)"
        (blur)="onBlur($event)"
      >

.stock-counter {
  & .focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  }

...
}

  onFocus() {
    this.focused = true;
    this.onTouch();
  }

  onBlur() {
    this.focused = false;
    this.onTouch();
  }

 

Handle keydwon event with code:

      <div
        [class.focus]="focused"
        tabindex="0"
        (keydown)="onKeyDown($event)"
        (focus)="onFocus($event)"
        (blur)="onBlur($event)"
      >

  onKeyDown(event: KeyboardEvent) {

    const handler = {
      ArrowDown: () => this.decrement(),
      ArrowUp: () => this.increment()
    };

    if(handler[event.code]) {
      event.preventDefault();
      event.stopPropagation();
      handler[event.code]();
    }
  }

 

[Angular] Adding keyboard events to our control value accessor component

标签：orm   color   onkeydown   with   span   mos   access   als   amp