Earlier, in our blog we have discussed about how to perform copy to clipboard feature in angular.

And also I have created a npm plugin for this feature.

Angular clipboard CDK

The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design. Think of the CDK as a blank state of well-tested functionality upon which you can develop your own bespoke components.

Definition from official website

The release candidate version of angular 9 brings separate module for clipboard feature.

In this post we will be using v/9.0.0-rc.8 to demonstrate the feature.

Step 1

Install the CDK package into the project.

npm i @angular/cdk@9.0.0-rc.8

Step 2

Import the ClipboardModule into target application module.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { ClipboardModule } from "@angular/cdk/clipboard";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,
   AppRoutingModule, 
   FormsModule, 
   ClipboardModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3

Now use the cdkCopyToClipboard attribute and choose the content which needs to copied.

<div class="container">
	<h3>Clipboard demo</h3>
	<div>
		Copy the whole text inside the textarea
		<textarea rows="4" cols="50" [(ngModel)]="textValue"></textarea>
		<button cdkCopyToClipboard="{{textValue}}" class="waves-effect waves-light btn">
      Copy to clipboard
      </button>
	</div>
</div>

You can pass a static value or a variable to capture the dynamic value.

Demo

Happy Coding!