Build Angular Material 11 Copy to Clipboard with ClipboardModule Example

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.

Read more: Copy to Clipboard in Angular using ngx-clipboard Package

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

Get inside the project root.

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

Run command to start the app.

ng serve --open

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 { AppRoutingModule } from './app-routing.module';
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,
    AppRoutingModule,
    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 = '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: string;
 
}