Angular Material 11 Copy to Clipboard Example Tutorial

Angular Material 11 Copy to Clipboard tutorial; this specific example focuses on implementing copy to clipboard feature in angular using the angular material package, especially the ClipboardModule offered by angular material.

How to Use Copy to Clipboard in Angular Material

  • Step 1: Install Angular Project
  • Step 2: Add Material Library
  • Step 3: Register ClipboardModule in App Module
  • Step 4: Implement Copy to Clipboard
  • Step 5: Angular Material Form Input Control Copy Text Example
  • Step 6: Start Angular Project

Install Angular Project

Start with the imperative angular CLI tool, which is essential for angular development:

npm install -g @angular/cli

Thereafter you can create angular app:

ng new angular-material-ctc

Immediately after get inside the app:

cd angular-material-ctc

Add Material Library

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

Its effortless to add angular material; ideally, you can use the recommended command to install the material package in the angular app:

You have to choose some options:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Register ClipboardModule in App Module

Simply register ClipboardModule and FormsModule in app module class, hence open and update the following code in app.module.ts file:

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 { }

Implement Copy Text to Clipboard

Add [cdkCopyToClipboard] directive, add a property to it; this will be the variable that holds the string text value that needs to be copied from the clipboard. Moreover, you can set the limit for a copy to the clipboard element.

Update the code in angular HTML template:

<button [cdkCopyToClipboard]="copyString" [cdkCopyToClipboardAttempts]="6">Copy</button>

Update the code in angular TypeScript template:

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

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

export class AppComponent {
  
  copyString = 'This text needs to copied.';
 
}

Angular Material Form Input Control Copy Text Example

Let check out the basic example where we create a textarea with a button and bind cdkCopyToClipboard directive to button for copying the form input control’s user-entered text using the material library.

Update the code in angular HTML template:

<textarea cols="40" rows="12" [(ngModel)]="formControl"></textarea>

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

Update the code in angular TypeScript template:

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


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

export class AppComponent {
  
  formControl: string;
 
}

Start Angular Project

Lastly, execute command to run the angular development server:

ng serve

Use the following url on the browser:

http://localhost:4200

Conclusion

The angular material clipboard example tutorial is over; thus, we have explained how to quickly and effortlessly integrate copy text to the clipboard using the material package in angular.