[Clipboard] Add support for Clipboard Web API

[EdricChan03]

Feature Description

Currently, the clipboard code from the CDK uses a <textarea> element and calls document.execCommand('copy') on the selected text in the <textarea>. However, this may be troublesome especially if there's a long amount of text to be copied.

What I'm suggesting is to use the Clipboard.writeText method from the Clipboard API.

Here's a description of the Clipboard API:

The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API; without user permission, reading or altering the clipboard contents is not permitted.

This API is designed to supersede accessing the clipboard using document.execCommand(). - from MDN docs for the Clipboard API

Currently, the Clipboard API is supported in the following browsers:

However, according to the MDN docs for "Clipboard availability", it mentions that:

The asynchronous clipboard API is a relatively recent addition, and the process of implementing it in browsers is not yet complete. Due to both potential security concerns and technical complexities, the process of integrating this API is happening gradually in most browsers.

Use Case

This would add another method of copying text instead of the current approach.

[crisbeto]

This might make it inconsistent between browsers, because from what I can tell, it also requires the user to grant permissions to the web page.

[jelbourn]

This is probably something we'd explore once the browser support story improves a bit more.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[crisbeto]

I'm closing this issue, because we can't make the switch in a backwards-compatible way. Our current API is synchronous and it returns a boolean indicating whether the action was successful, whereas the browser API is asynchronous.