How to remove focus from text field when user presses ESC angular 5

Question

I need to remove focus from input text field from user with the ESC key press. I don't know how to do it with text input fields. Below code works perfectly to detect the ESC key is pressed.

// Triggered Listener to detect event raised from DOM.
@HostListener('document:keydown', ['$event']) onKeydownHandler(event: 
KeyboardEvent) {
 if (event.keyCode === 27) {
    return false;
  }
}

Anyone can help how to do?? Thanks

Answer 1

You can call the blur method of the input field in the handler of the keydown.escape event:

<input #txtInput (keydown.escape)="txtInput.blur()">

See this stackblitz for a demo.