Angular2 - ngx-clipboard not working

Question

I installed ngx-clipboard as mentioned in the documentation and included the js in systemjs.config as well. However I am getting below error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngxClipboard' since it isn't a known property of 'button'. ("  </div>

Here is my template:

<div class="col-xs-12 share-pageurl-label">
                    <a #copyTarget>{{pageURL}}</a>
                </div>
                <div class="col-xs-12 share-copy-btn">
                    <button [(ngxClipboard)]="copyTarget" (cbOnSuccess)="linkCopied()" 
                    [ngClass]="{linkCopied: isCopied}">
                        {{copyBtnLabel}} <span *ngIf="isCopied" class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>

score 8 · Answer 1 · answered May 31 '17 at 14:28

I believe you'll get this error if you have not imported the ClipBoardModule correctly. If you have nested modules and want to use in a lower level, you'll have to make sure that you export this on a parent module, and import on a child module.

parent.module

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  declarations: [],
  imports: [
    ClipboardModule
  ],
  exports: [
    ClipboardModule,
  ]
})
export class ParentModule {
}

child.module

import { ParentModule } from '../../parent.module';

@NgModule({
imports: [
  ParentModule,
],
declarations: []
})
export class ChildModule {
}

score 0 · Answer 2 · edited Jun 16 '22 at 08:02

0

Have you try plunker ? or Demo code ?

It seems working fine on plunker

make sure you point to correct place

System.config({
    map: {
        'ngx-clipboard': 'node_modules/ngx-clipboard/dist/bundles/ngxClipboard.umd.min.js'
    }
});

edited Jun 16 '22 at 08:02

Glorfindel

21,988
13
81
109

answered Mar 28 '17 at 14:54

maxisam

21,975
9
75
84

Yes Maxisam, I saw the plunker. Could you confirm if we need to install just the ngx-clipboard module only or any other module as well? – Peter Mar 29 '17 at 05:29
for system.js, you need to include clipboard.js as well. Just check the plunker. It is for system.js – maxisam Mar 29 '17 at 06:04
1

yes. I did that as well. I observed that on installing ngx-clipboard, the clipboard module is also installed. I included the same in systemjs as in plunker. Also the hing thats more shocking is if I replace my systemjs in your plunker, it still works! – Peter Mar 29 '17 at 08:40
Well, that is odd. Probably the version of the systemjs causing this issue – maxisam Mar 29 '17 at 14:20

Angular2 - ngx-clipboard not working

2 Answers2

Linked