KEYBOARD_DOM_ERROR

Question

I'm trying to make a virtual keyboard in my angular app, And i found Simple-keyboard package so that i decided to install it and customize it but i get some error like ".simple-keyboard" was not found in the DOM. what's the problem? Someone can help me?

I'm using angular 11.2.8

Answer 1

I'm using this package with Angular 8, not sure if this can help.

When I installed and followed the steps with Angular example, I saw KEYBOARD_DOM_ERROR in my console either, then I found the solution for me which this issue answered.

KEYBOARD_DOM_ERROR means that <div class="simple-keyboard"></div> was not found in the dom at instantiation.

And I tried to create an element in .ts file instead of just add in template, just like the issue said.

// component.ts
// you can add other className to make keyboard display:none first

ngOnInit(): void {
  const div = document.createElement('div');
  div.className += "simple-keyboard";
  document.body.appendChild(div);
}

<!-- component.html -->
<!-- just want to remind you need to delete it -->

<!-- <div class="simple-keyboard"></div> -->

After these two things, my error disappear, and I can do what I need to do next.

Answer 2

Make sure that your html has a div with the simple-keyboard class (or whatever name you gave to your keyboard).

If the error keeps happening try creating the instance of the keyboard after the view has been initialized:

ngAfterViewInit() {
  this.keyboard = new Keyboard(".simple-keyboard",{
    onChange: input => this.onChange(input),
    onKeyPress: button => this.onKeyPress(button)
  });
}

Answer 3

Add following code in your html file

  <div class="simple-keyboard"></div>