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

One of the most important thing when building custom form component are adding accessbility support.

The component should be focusable. We can achieve this by adding ' tabindex= "0" ':

      < Div         TabIndex = "0"      >

Add some CSS class for Foucs:

      < Div         [Class.focus] = "focused"         tabindex= "0"        (focus)= "onfocus ($event)"        (Blur) = "OnBlur ($event)"      >

{  &. Focus {    Box-shadow: 0 1px 1px rgba (0, 0, 0,. 6);  } ...}

  onfocus () {    thistrue;      This . OnTouch ();  }  OnBlur () {    thisfalse;      This . OnTouch ();  }

Handle Keydwon event with code:

 <  div  [class.focus]  = "focused"   TabIndex  = "0"   (KeyDown)  = "OnKeyDown ($event)"   =" onfocus ($event) "  (Blur)  =" OnBlur ($ Event) " >  

  OnKeyDown (event:keyboardevent) {    = {      this. Decrement (),        this. Increment ()    };     if (Handler[event.code]) {      event.preventdefault ();      Event.stoppropagation ();      Handler[event.code] ();    }  }

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