Build Angular Material 10 Copy to Clipboard with ClipboardModule

In this Angular 10|9 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 ngx-clipboard Module in Angular

We will now install the ngx-clipboard package through NPM; it is a pure angular clipboard directive that helps copy and paste the content in Angular.

npm i ngx-clipboard

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 Module

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    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—the directive selector doubles as an @Input() for the text to be copied.

<div #container>
  <button ngxClipboard [cbContent]="'Content to be copied.'" [container]="container">Copy</button>
</div>

Following code goes into the angular component class.

import { Component, IterableDiffers } from '@angular/core';
import { Clipboard } from '@angular/cdk/clipboard';

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

export class AppComponent {
 
  dynamicText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

  constructor(private cb: Clipboard) { }

  copyToCBText() {
    this.cb.copy(this.dynamicText);
  }

}

First, import the Clipboard from ‘@angular/cdk/clipboard’. The dynamicText var holds the static text value; however, you can pass the dynamic value. The copyToCBText() function profoundly copies the content or text from Clipboard.