Copy to clipboard

The copy to clipboard component is used to let the user copy links, code snippets and more.

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> <input dtInput value="https://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardDefaultExample {} <dt-copy-to-clipboard> <input dtInput value="https://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <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 {}

Initialization

The <dt-copy-to-clipboard> creates a container including a textarea, input or a label ready to be copied to the clipboard.

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

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.

The following example shows a copy to clipboard component that triggers a callback function after a successful copy action.

´ Loading interactive demo...
<dt-copy-to-clipboard (copied)="copyCallback()"> <input dtInput [value]="_value" aria-label="Text that is copied to clipboard" /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <br /> <div> {{ _copyHint }} </div> export class CopyToClipboardCallbackExample { _value = 'https://barista.dynatrace.com/'; _copyHint = 'Will change after copy.'; constructor(private _changeDetectorRef: ChangeDetectorRef) {} copyCallback(): void { this._copyHint = `Copied "${this._value}" to clipboard.`; // tslint:disable-next-line:no-magic-numbers timer(2500).subscribe((): void => { this._copyHint = 'Will change after copy.'; this._changeDetectorRef.markForCheck(); }); } } <dt-copy-to-clipboard (copied)="copyCallback()"> <input dtInput [value]="_value" aria-label="Text that is copied to clipboard" /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <br /> <div> {{ _copyHint }} </div> export class CopyToClipboardCallbackExample { _value = 'https://barista.dynatrace.com/'; _copyHint = 'Will change after copy.'; constructor(private _changeDetectorRef: ChangeDetectorRef) {} copyCallback(): void { this._copyHint = `Copied "${this._value}" to clipboard.`; // tslint:disable-next-line:no-magic-numbers timer(2500).subscribe((): void => { this._copyHint = 'Will change after copy.'; this._changeDetectorRef.markForCheck(); }); } }

Methods

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

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 below the copy to clipboard component informing the user about the problem and possible solutions.

´ Loading interactive demo...
<button dt-button (click)="_fakeError()" variant="secondary"> Fake error </button> <dt-copy-to-clipboard (copyFailed)="_handleError()" (copied)="_resetErrorState()" > <input dtInput value="https://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <dt-alert severity="error" *ngIf="_copyFailed"> It was not possible to copy the text to the clipboard. </dt-alert> export class CopyToClipboardErrorExample { _copyFailed = false; _fakeError(): void { this._copyFailed = true; } _handleError(): void { /* noop */ } _resetErrorState(): void { this._copyFailed = false; } } <button dt-button (click)="_fakeError()" variant="secondary"> Fake error </button> <dt-copy-to-clipboard (copyFailed)="_handleError()" (copied)="_resetErrorState()" > <input dtInput value="https://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <dt-alert severity="error" *ngIf="_copyFailed"> It was not possible to copy the text to the clipboard. </dt-alert> export class CopyToClipboardErrorExample { _copyFailed = false; _fakeError(): void { this._copyFailed = true; } _handleError(): void { /* noop */ } _resetErrorState(): void { this._copyFailed = false; } }

Dark theme

The copy to clipboard component can be placed on dark background.

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <input dtInput value="https://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <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> <input dtInput value="https://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </section> export class CopyToClipboardDarkExample {}

Copy to clipboard in use

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. The main difference between the two is the way they handle long content.

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.

´ Loading interactive demo...
<dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="The text content of the textarea will be copied to clipboard." rows="8"> buildscript { repositories { jcenter() } dependencies { classpath 'com.dynatrace.tools:android:7.2.+' } } </textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardTextareaExample {} <dt-copy-to-clipboard> <!-- prettier-ignore --> <textarea dtInput aria-label="The text content of the textarea will be copied to clipboard." rows="8"> buildscript { repositories { jcenter() } dependencies { classpath 'com.dynatrace.tools:android:7.2.+' } } </textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> export class CopyToClipboardTextareaExample {}

Example within context dialog

The component can also be placed 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://barista.dynatrace.com/" aria-label="The value of this input field will be 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://barista.dynatrace.com/" aria-label="The value of this input field will be copied to clipboard." /> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> </dt-context-dialog> export class CopyToClipboardContextExample {}