cant bind matkeyboard to input element - Angular 7

[teja0533]

Hello,

I'm integrating ngx-material-keyboard and cannot see a keyboard opening on focus of the element. Tried debugging the same - looks like it doesnt bind to my input control at all. Not sure what I'm missing.

html input looks like below
<input type="text" matkeyboard #attachId/>

ts file has following imports
import { MatKeyboardService, MatKeyboardComponent, MatKeyboardRef } from '@ngx-material-keyboard/core';

what does my package.json look like?
"dependencies": {
"@angular/animations": "^7.2.12",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.2.12",
"@angular/compiler": "^7.2.12",
"@angular/core": "^7.2.12",
"@angular/forms": "^7.2.12",
"@angular/http": "^7.2.12",
"@angular/material": "^7.0.0",
"@angular/platform-browser": "^7.2.12",
"@angular/platform-browser-dynamic": "^7.2.12",
"@angular/platform-server": "^7.2.12",
"@angular/router": "^7.2.12",
"@aspnet/signalr": "^1.1.0",
"@ngx-material-keyboard/core": "^0.1.1",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "1.0.2",
....}

when tried changing the html input element to
<input type="text" [matKeyboard]="'en-us'" #attachId/> Im getting an error

Can't bind to 'matKeyboard' since it isn't a known property of 'input'. but i have imported MatKeyboardComponent in corresponding ts file (see above)

Any help is highly appreciated.

Thanks

[harsszegi]

Could anyone sort this out ? I’m facing the same issue with Angular 9. Thanks

[juocal]

I am also struggling with the same Issue. I have even updated to the latest angular & angular-cli version (currently 10).

Error Message in console log: Can't bind to 'matKeyboard' since it isn't a known property of 'input'.

[harsszegi]

I am also struggling with the same Issue. I have even updated to the latest angular & angular-cli version (currently 10).

Error Message in console log: Can't bind to 'matKeyboard' since it isn't a known property of 'input'.

Forget this, use https://www.npmjs.com/package/angular-onscreen-material-keyboard instead, that works just fine

[juocal]

Thanks @harsszegi for the quick reply! I already tried this npm package, but it did not work (as well).
I am still trying to figure out Angular X with all its dependencies and incompatibilities is quite complicated when something just dont work.

But the npm link is probably really good start for others looking for a working solution. as this original github project (https://github.com/ngx-material-keyboard) is apparently not maintained anymore and a lot of different versions exit on github.

I will update my post, if i got it working with your project! At least i am confintend now, that it is a version conflict with my project :)

[harsszegi]

I am using the angular-onscreen stuff with Angular 9 + Ionic (with some small changes) without any issue.

[teja0533]

Hello All, I was able to solve my problem then. Please verify if you have included all the MatKeyKeyboard modules in your appModule (or any other custom module that you have created). Also, this keyboard works seamlessly when using material tags and gives few errors on palin html tags. please use the forms attributes like - formControlName on input textboxes you have to include corresponding formmodules in your app module too. Below is one quick reference <input matInput type="text" [matKeyboard]="yourlocale" darkTheme="true" formControlName="yourControlName" (keyup)="onKeyup()" (enterClick)="onenterClick()" name="yourname" class= "yourclass" />

…

On Wed, Sep 2, 2020 at 3:43 AM harsszegi ***@***.***> wrote: I am using the angular-onscreen stuff with Angular 9 + Ionic (with some small changes) without any issue. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#93 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMIJGDKNFRPA2I2VRS6SGUTSDXZTHANCNFSM4HUCGAJA> .

[juocal]

Finally, I found a working solution.

My issue was, that I was using a prepared project which had already a file names 'appModule'. It was the root appModule and I expected it to work for my controller class as well. (In the demo, all files are called the same.)

After adding and importing the MatKeyKeyboard module in my "other" appModule file it worked.

MatKeyKeyboard imports the "matKeyboard" directive for the input tag in the HTML-File. It is recommended to check if the MatInput module is added as well!

For everyone running into angular 9 problems, this issue is already shown on compile time, instead of runtime in the browser in angular 8.

Thank you for your Help. If anyone needs advice, let me know. Just took me 2 days ;)