Angular Material Clipboard Example

October 27, 2020 | Category : Other

Hello Dev,This tutorial is focused on angular material clipboard example. you'll learn copy div content to clipboard angular material. We will use angular material cdkcopytoclipboard example. you'll learn angular material copy to clipboard example. you will do the following things for copy to clipboard in 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 and angular 10.

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