Angular 11/10 Material Clipboard Tutorial

Here, i will show you angular 10 material clipboard example. This post will give you simple example of angular 11/10 material copy to clipboard example. if you have question about angular 10 material cdkcopytoclipboard example then i will give simple example with solution. you can see copy to clipboard in angular 10 material.

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