Can not include multiple keyboards in an Angular component

[ddahan]

Simple-keyboard version
2.14.3

Describe the bug
In Angular 6, when trying to include multiple keyboards in a component (embedding simple keyboard as a component itself), only the first one is displayed/working.
Here is a minimal Github project that shows the issue: https://github.com/ddahan/pockey

Screenshots

Debug

As you can see, the first app-simple-component div contains a keyboard html content, but the second div contains nothing.

[hodgef]

Hey @ddahan,

You need to give a different class to each keyboard instance, otherwise the second instance will just override the first one.

For example:

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

let keyboard = new Keyboard({
// Options here
});

let keyboard2 = new Keyboard(".keyboard2", {
// Options here
});

Docs:
https://simple-keyboard.com/qa-use-cases/#give-different-class-keyboard

Demo:
https://codesandbox.io/s/github/hodgef/simple-keyboard-npm-demos/tree/uc-dispatch/

This should fix your issue, but if it doesn't let me know and we can look at this further.

Regards,
Francisco Hodge

[ddahan]

Hi @hodgef and thanks for quick reply (and for your amazing job on this).

I understand that there is a conflict between 2 keyboards and I think I understood your code samples.

However, in Angular, the clean way to work when you want to use the same stuff several times is to create a unique component (this is what I did with SimpleKeyboardComponent) and then, to include it with an app selector (here: <app-simple-keyboard></app-simple-keyboard>, as many times as you want, in another component.

Looking at your code samples, it seems you want me to instanciate the component twice, which is impossible because the instanciation is made in the component itself.

So, the only two workarounds I can see right now would be :

1. to NOT create a component at all for using keyboards in my app.
2. to duplicate the SimpleKeyboardComponent into 2 different components.

In both cases, I think it's not ideal because it breaks the "Don't repeat Yourself" philosophy, if I want to use the same exact keyboard more than once.

Maybe this issue could be marked as "enhancement to respect Angular right way to do"
However, I'm not an expert at all in Angular so I let other people give their opinion about this.

Thanks again.

[hodgef]

Hey @ddahan,

I understand what you mean. To accomplish this use case in react for example, I pass the class name to the component though a parameter (prop). Like so:

https://simple-keyboard.com/react/qa-use-cases/#give-different-class-keyboard

I wonder if using a similar approach would work for your use-case.

Something like this:

<app-simple-keyboard class="keyboard2"></app-simple-keyboard>

In any case, for multiple keyboards you do need multiple instances, as the event listeners, rows etc are bound to each keyboard's DOM element. Another approach would be to have a single keyboard serve all the inputs, like so:

https://simple-keyboard.com/qa-use-cases/#using-several-inputs

Hope this helps,
Francisco Hodge

[ddahan]

You're right it's the way to go for sure.
In Angular, we have @input to provide data to children components.
I tried to use @Input to provide class name to the keyboard component., I think it's almost done, but something's wrong with the keyboard component instanciation, I got a DOM error:

Could you take a look to the updated code here please? https://github.com/ddahan/pockey
Thanks!!!

[ddahan]

The error makes senses because at OnInit level, DOM is not created.
Still investigating how to process, using another lifecycle event (like AfterViewInit)

EDIT:

using ngAfterViewInit instead of ngOnInit I have no more errors.
However CSS is not applied at all. We're almost done :)

EDIT2:

specifying the theme in options seems to solve the CSS problem! 👍
(github repo updated, as I'm pretty sure it could be useful to other people)

    ngAfterViewInit() {
        this.keyboard = new Keyboard(`.${ this.keyboardClassName }`,
            {theme: 'simple-keyboard hg-theme-default hg-layout-default', });
    }

[hodgef]

Awesome! Glad you got it figured out. I will update the Angular demos soon to use ngAfterViewInit instead of onInit. Thanks!

[ddahan]

You are the one to thanks ;)
I updated the Github repo if it can help you to make the demo :)