Create Angular Material 16 Copy to Clipboard Example

Last Updated on March 4, 2024 by Digamber in Angular Material

In this Angular tutorial, we will see how to add Copy to Clipboard feature using Angular Material’s ClipboardModule.

Copy to Clipboard is a simple process that allows site visitors to copy the important content and paste elsewhere. It could be coupons, GitHub repository URL, some kind of code etc.

This process starts with a button that says copy, you can directly copy the text by clicking onto the button.

Suppose you have implemented the Angular Material library in your angular application. In that case, you can create a copy to clipboard feature by importing the ClipboardModule API.

Create New Angular Application

Must install angular CLI through below command.

npm install -g @angular/cli

Next, install a new Angular application, skip this step if already done with the angular installation.

ng new angular-material-copy-to-clipboard-demo

If anyhow you get the type related error in angular:

Make sure to set following properties to false in tsconfig.json file:

"compilerOptions": {
 ...
 ...
   "strict": false,
   "noPropertyAccessFromIndexSignature": false,
 ...
 ...
},
  "angularCompilerOptions": {
    "strictTemplates": false
  }

Get inside the project root.

cd angular-material-copy-to-clipboard-demo

Install Angular Material

Installing the material package is easy; it needs the following command to be executed through a command prompt.

ng add @angular/material

Answer the following questions.

# ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes

Import ClipboardModule in Main App Module

Next, import the ClipboardModule from ‘@angular/cdk/clipboard’ package, plus the FormsModule inside the main app module class.

Update the given below code in app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ClipboardModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Adding Copy to Clipboard

The real power lies in the cdkCopyToClipboard directive; it gives precedence for integrating copy-on-click functionality to a current element easily.

Hence open App component HTML template and update the below code:

<button [cdkCopyToClipboard]="copyClipText" [cdkCopyToClipboardAttempts]="7">Copy</button>

Open App component TypeScript template and update the following code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  copyClipText: any = 'Hello, Copy this text.';
 
}

Copy Text Form Input in Angular Material

In this example i will show you how to easily copy text via a form input control, mainly for textarea control. Therefore, add the below code in HTML template:

<textarea cols="30" rows="10" [(ngModel)]="textareaInput"></textarea>

<button [cdkCopyToClipboard]="textareaInput">Copy</button>

Similarly, update the TypeScript template:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  textareaInput: any;
 
}

Run command to start the app.

ng serve --open