Angular Material Clipboard Example by Tutorial

Angular Material copy to click board tutorial will be discussed today. Our application will have a Copy to Clipboard feature using which a user can copy text content by the click event. The Angular Material ClipboardModule API helps us to access the clipboard and copy data.

 How to Add Copy to Clipboards Feature in Angular Material Application?

• Step 1) Setup Angular Application.
• Step 2) Install Material Library.
• Step 3) Import ClipboardModule in App Module.
• Step 4) Adding Copy to Clipboard.
• Step 5) Example to Copy String from Input Form Control using Material Clipboard.
• Step 6) Start Development Server and Run Application.

Setup Angular Application

To create a new Angular application, we need to install the Angular CLI tool

npm install -g @angular/cli

After that, you can create the Angular application.

ng new angular-clipboard-app

Now move to the application directory

cd angular-clipboard-app

Install Material Library

To access Clipboard, we will install the Material library. It is very easy to install using ng command. Execute following command to start the installation. It will auto pick the compatible Material version to start the installation.

ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
? Set up global Angular Material typography styles? No 
? Set up browser animations for Angular Material? Yes

It will ask for a few configuration options related to

Choosing a theme: You can select any in-built theme or use a custom theme. (Default: Indigo/Pink)

Typography styles: You can choose to apply typography styles globally or not. (Default: No)

Setup Browser Animations: If we select yes, the BrowserAnimationsModule will be imported into AppModule to support material animations. (Default: Yes)

Import ClipboardModule in App Module

To access the Clipboard feature in the Angular application, we need to import the ClipboardModule in the main App Module class.

In our application, we will use Text input, so import the FormsModule as well.

Open the app.module.ts file and update it with the following code:

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 [cdkCopyToClipboard] directive is used to bind a property that will have the String or Data we want to copy to the clipboard.

However, we can also use the [cdkCopyToClipboardAttempts] directive to take the number of attempts to copy longer texts.

Add the following HTML in the component template

<button 
   [cdkCopyToClipboard]="stringToCopy" 
   [cdkCopyToClipboardAttempts]="4"
>
Copy to clipboard
</button>

Update the following code in the component class

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

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

export class AppComponent {

  stringToCopy = 'This text will be copied to clipboard.';
}

Example to Copy String from Input Form Control using Material Clipboard

We have already checked how to copy static text to the clipboard by clicking the button. Now we will add a textarea with a button and the click event will copy the dynamically added string in textarea to the click board.

Add following HTML template in component

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

<button 
    [cdkCopyToClipboard]="stringToCopy" 
    [cdkCopyToClipboardAttempts]="5" 
> 
Copy to Clipboard 
</button>

Programmatically Copy to Clipboard in Component Class Example

Ideally, we have some complex scenarios which need to b controlled inside the Component class. In this example, we will import the Clipboard class and use its copy() method.

Update the HTML template

<textarea cols="50" rows="50" [(ngModel)]="stringToCopy"></textarea>

<button (click)="copyTextarea()"> 
    Copy to Clipboard 
</button>

Update the component class

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

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

export class AppComponent {

  stringToCopy:string = '';

  constructor(private clipboard: Clipboard) {}

  copyTextarea() {
   this.clipboard.copy(this.stringToCopy);
  }
}

Start Development Server and Run Application

Finally, you can run the application by executing the ng serve command

ng serve --open

The --open flag will open the application at the following URL

http://localhost:4200

Conclusion

The Angular Material Copy to Clipboard API allows a user to copy data very easily. We discuss how to implement the Copy to Clipboard functionality quickly and easily. Moreover, we also discuss how to access the Clipboard events inside the Component class itself.

Do let us know your thoughts in the comments section.. Thanks!