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
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!