How to copy text to clipboard in Angular

In this article I will show you how to copy text to clipboard in your Angular project leveraging the Clipboard service provided by Angular framework.

1 — Create an empty Angular Project

First, let’s start off by creating an empty Angular project. To do that open a Terminal in your VScode and type the following command:

> ng new ClipboardExample

and make sure to follow the command prompts. This might take a bit to complete because Angular is going to download its required packages. Below is a link to an article that I have created that will show you how to create an empty Angular 9 project along with all the necessary requirements.

How to start a new Angular 9 Project in few easy steps

2 — Install the CDK package in your Angular project

In order to use the Clipboard service you must install the CDK package in your project. The barebone Angular project does not include the CDK package.

In your Angular project terminal type the following command to download the package using npm:

npm install @angular/cdk

3 — Inject Clipboard service in the constructor of…