Angular Material Copy to Clipboard Example

Hello Dev,

If you need to see example of angular material copy to clipboard example. We will use copy to clipboard in angular material. i explained simply about angular material clipboard example. I’m going to show you about copy div content to clipboard angular material.

In this post, i will give you simple example copy text to clipboard using angular material. you can easily use copy to clipboard in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17.

Here, i will give you two example one simple copy text using button click event with angular material. basically you can click on button and it will copied and you can paste text. second one we will copy text using entered input textarea value in button click event. so let' see both example one by one.

Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Install Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Import Material ClipboardModule

Now, here we will import ClipboardModule from angular/cdk/clipboard and then we add on declarations part. so let's update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ClipboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1) Angular Material Clipboard Example

we will use matBadge for creating Clipboard in angular app. so let's update follow html file.

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstApp';
   
  copyText = 'This is demo from itSolutionStuff.com';
}

src/app/app.component.html

<h1>Angular Material Copy to Clipboard Example - ItSolutionStuff.com</h1>
     
<button [cdkCopyToClipboard]="copyText" [cdkCopyToClipboardAttempts]="5">Copy text</button>

Now you can see layout as like bellow:

2) Angular Material Clipboard with Input

Here, we will create simple example with add one button with textarea and you can write anything and copy that content. so see bellow example.

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstApp';
  
  value = 'This is demo from itSolutionStuff.com';
}

src/app/app.component.html

<h1>Angular Material Copy to Clipboard Example - ItSolutionStuff.com</h1>
    
<strong>Copy Bellow Input Text:</strong><br/>
<textarea cols="30" rows="10" [(ngModel)]="value"></textarea><br/>
<button [cdkCopyToClipboard]="value">Copy to clipboard</button>

Now you can see layout as like bellow:

Now you can run by bellow command:

ng serve

I hope it can help you...