how to add ngx-clipboard (or any similar library) to JHipster 6.10 Angular 10-based application?

Question

So, I've tried with already 3 or 4 different ngx-* libraries, that promise to give capability to copy page content to Clipboard. Here's how it goes with ngx-clipboard, which seems to be the most up-to-date of them all, and promises Angular 10 support.

Steps:

1. clone jhipster-sample-app
2. run .mvnw, then npm start
3. run npm install ngx-clipboard --save
4. add the module to imports, in app.module.ts:

import { ClipboardModule } from 'ngx-clipboard';
...
imports: [
...
    ClipboardModule,
...
]

4. added data model field to home.component.ts:

  fakeValue = 'hi clipboard';

5. added input and button to home.component.html:

        <input type="text" class="form-control" [(ngModel)]="fakeValue"/>

        <button ngxClipboard [cbContent]="fakeValue">Copy</button>

6. click Save; the project re-build will be triggered, with following errors emitted:

ERROR in src/main/webapp/app/home/home.component.html:30:30 - error NG8002: Can't bind to 'cbContent' since it isn't a known property of 'button'.

30         <button ngxClipboard [cbContent]="fakeValue">Copy</button>
                                ~~~~~~~~~~~~~~~~~~~~~~~

7. and of course, "copy" button does not copy anything.

Question: what am I doing wrong?

PS: this branch (https://github.com/62mkv/jhipster-sample-app/tree/ngx-clipboard) contains all of the changes, described above.

PPS: npm run build emits the same error (+ also error about the template, which is a consequence of the above mentioned error)

Answer 1

Actually, this specific problem seems to be quite a typical problem, related to the fact that nearly all of the README-s for library are only ever mentioning app.module.ts, while JHipster application is split into many modules, alongside app.module.ts. Which is immensely confusing for people without any Angular proficiency to speak of...

Either way, this comment (error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. In Angular 9) actually gives the most specific answer:

a dependency must be imported into each module separately, so in my case, importing it into home.module.ts instead of app.module.ts solved the problem!