Using CDK Clipboard to work with the system clipboard

You may have visited hundreds of websites over time, and you might have seen a feature called Click to copy on some of them. This is usually used when you have a long text or a link that you need to copy, and you'll find it way more convenient to just click to copy instead of selecting and then pressing the keyboard shortcuts. In this recipe, we're going to learn how to use the Angular CDK Clipboard API to copy text to the clipboard.

Getting ready

The project for this recipe resides in chapter09/start_here/using-cdk-clipboard-api. Proceed as follows:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, as follows:

Figure 9.10 – using-cdk-clipboard-api running on http://localhost:4200

Now that we have the app running locally, let...