'Property 'copy' does not exist on type 'Clipboard'

I'm trying to copy a text when a button is clicked. I tried following Angular's documentation (https://material.angular.io/cdk/clipboard/overview#programmatically-copy-a-string) but my terminal is giving me the following error when compiling:

Property 'copy' does not exist on type 'Clipboard'

Here's my .ts file:

export class myComponent implements OnInit {
  constructor(private clipboard: Clipboard) {}
  ngOnInit(): void {}

  copyTest() {
    this.clipboard.copy("test"); // Property 'copy' does not exist on type 'Clipboard'.
  }
}

Here's my .html file:

<button [cdkCopyToClipboard]="copyTest()">Click to copy</button>

And here's my app.module.ts file:

import { ClipboardModule } from "@angular/cdk/clipboard";

@NgModule({
  declarations: [
    AppComponent,
    myComponent,
  ],
  imports: [
    ClipboardModule,
  ]
})

Any ideas why this error is occurring?

angularclipboard


Solution 1:[1]

You must be missing the correct import for Clipboard.

Try adding: import { Clipboard } from '@angular/cdk/clipboard'; to your .ts file as well as your app.module.ts.

There is an interface Clipboard as well which your IDE probably accepts as valid TS.

Solution 2:[2]

Try this instead:

<button [cdkCopyToClipboard]="copyTest('Test!')">Click to copy</button>

copyTest(test: string) {
    this.clipboard.copy(test);
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman

Related Questions