Build Angular Material 11 Copy to Clipboard with ClipboardModule
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 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.