Copy to clipboard

The copy to clipboard component is a combination of a readonly input field or text area, and a copy button. It is used to copy links, code snippets and more. This component takes the hassle out of selecting any given amount of text and copying it to the clipboard. This is especially helpful for complex or large amount of content.

´ Loading interactive demo...
<dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://defaultcopy.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardDefaultExample {} <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://defaultcopy.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardDefaultExample {}

Error state

In case of an error, e.g. if the user is not able to copy something to their clipboard, there should be an alert informing the user about the problem and possible solutions.

Error message under copy to clipboard component

Variants

There are two versions of the copy to clipboard component. One uses a readonly text area and the other uses a readonly input field. The text area is used to display large amount of text, and the input field is used to display links and one-liners.

On dark background

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://dark.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </section> export class CopyToClipboardDarkExample {} <section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://dark.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </section> export class CopyToClipboardDarkExample {}

Behavior

After copying something to the clipboard, the button will turn green and the "copy" label will turn into a checkmark, this serves as a direct feedback to users. The change shows the user that the content was copied successfully.

The turquoise "copy" button changes to a green button containing a checkmark

Responsive behavior

The copy to clipboard component will always be as wide as the container it is in. Even on smaller screen sizes, the copy button will always be displayed at the right bottom corner of the field.

Input field vs text area

The main difference between the two is the way they handle long content.

Input fields

If the content exceeds the length of the input field, the text is cut off which is the default behavior in the web.

Text area

The height of the text area is not defined per default, it is recommended to make the text area high enough to fit the whole content, this avoids unnecessary scrollbars. Thanks to the text wrapping, the content will always be able to be displayed. In cases where the content exceeds the visible part of the text area, a scrollbar will be shown so the user can reach the end of the content that's not shown.

Copy to clipboard with text area

Copy to clipboard in use

The component can also be inside a context dialog and is most often used to share links.

´ Loading interactive demo...
<dt-context-dialog #contextdialog color="cta" aria-label="Show more actions" aria-label-close-button="Close context dialog" > <dt-copy-to-clipboard (afterCopy)="contextdialog.close()"> <input dtInput value="https://context.dynatrace.com" aria-label="Text that is copied to clipboard" /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </dt-context-dialog> export class CopyToClipboardContextExample {} <dt-context-dialog #contextdialog color="cta" aria-label="Show more actions" aria-label-close-button="Close context dialog" > <dt-copy-to-clipboard (afterCopy)="contextdialog.close()"> <input dtInput value="https://context.dynatrace.com" aria-label="Text that is copied to clipboard" /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </dt-context-dialog> export class CopyToClipboardContextExample {}

The <dt-copy-to-clipboard> creates a container including a textarea, input or

a label ready to be copied to the clipboard. It is possible to disable the

entire copy clipboard container.

Using <dt-copy-to-clipboard-label> defines the button content (e.g. text like

"click here to copy").

´ Loading interactive demo...
<dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://defaultcopy.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardDefaultExample {} <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://defaultcopy.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardDefaultExample {}

Imports

You have to import the DtCopyToClipboardModule when you want to use the

dt-copy-to-clipboard:

@NgModule({
  imports: [DtCopyToClipboardModule],
})
class MyModule {}

Inputs

Name Type Default Description
disabled boolean false If true (= default) the included button and textarea are disabled, no copy is possible.

Outputs

Name Type Description
copied EventEmitter<void> Callback that is triggered after a successful copy.
afterCopy EventEmitter<void> Callback that is triggered after a successful copy and after the copy animation is stopped.
copyFailed EventEmitter<void> Callback that is triggered after a failed copy.

Methods

Name Description Return value
copyToClipboard() Triggers copy to clipboard programmatically. void

Examples

With Callback

´ Loading interactive demo...
<dt-copy-to-clipboard (copied)="copyCallback()"> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://copyexample.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <br /> <div> {{ _copyHint }} </div> export class CopyToClipboardCallbackExample { _copyHint = 'Will change after copy'; copyCallback(): void { this._copyHint = 'Copy was done'; // tslint:disable-next-line:no-magic-numbers timer(2500).subscribe((): void => { this._copyHint = 'Will change after copy'; }); } } <dt-copy-to-clipboard (copied)="copyCallback()"> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://copyexample.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <br /> <div> {{ _copyHint }} </div> export class CopyToClipboardCallbackExample { _copyHint = 'Will change after copy'; copyCallback(): void { this._copyHint = 'Copy was done'; // tslint:disable-next-line:no-magic-numbers timer(2500).subscribe((): void => { this._copyHint = 'Will change after copy'; }); } }

Dark theme

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://dark.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </section> export class CopyToClipboardDarkExample {} <section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="Text that is copied to clipboard"> https://dark.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </section> export class CopyToClipboardDarkExample {}

Example within context dialog

´ Loading interactive demo...
<dt-context-dialog #contextdialog color="cta" aria-label="Show more actions" aria-label-close-button="Close context dialog" > <dt-copy-to-clipboard (afterCopy)="contextdialog.close()"> <input dtInput value="https://context.dynatrace.com" aria-label="Text that is copied to clipboard" /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </dt-context-dialog> export class CopyToClipboardContextExample {} <dt-context-dialog #contextdialog color="cta" aria-label="Show more actions" aria-label-close-button="Close context dialog" > <dt-copy-to-clipboard (afterCopy)="contextdialog.close()"> <input dtInput value="https://context.dynatrace.com" aria-label="Text that is copied to clipboard" /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </dt-context-dialog> export class CopyToClipboardContextExample {}