1

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

Anselme Zodehougan
  • 23
  • 4

3 Answers3

3

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.

sammiehsieh
  • 46
  • 4
1

Add following code in your html file

  <div class="simple-keyboard"></div>
Sonne
  • 691
  • 1
  • 6
  • 20
  • Well there can be many possible issues. First check the compiled application in browser, and check if the div with .simple-keyboard is shown. If not, you need to make sure that your component is added into the main application or any component that should use it – Sonne Apr 15 '21 at 12:59
  • 1
    I was getting this error because my `class="simple-keyboard"` `div` was inside a `*ngIf` `div`, that was set after the constructor. My solution was to wrap the `new Keyboard` in `setTimeout`. – xinthose Dec 02 '21 at 18:40
1

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)
  });
}
SergiPR
  • 51
  • 2