KEYBOARD_DOM_ERROR

Issue

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

Solution

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.

Answered By - sammiehsieh