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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example