Copy to clipboard

The copy to clipboard component is a combination of a readonly input and a copy button.

´ Loading interactive demo...
<dt-copy-to-clipboard> <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 DefaultCopyToClipboardExampleComponent { } <dt-copy-to-clipboard> <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 DefaultCopyToClipboardExampleComponent { }

Variants

´ 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 ContextCopyToClipboardExampleComponent { } <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 ContextCopyToClipboardExampleComponent { }
´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <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 DarkCopyToClipboardExampleComponent {} <section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <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 DarkCopyToClipboardExampleComponent {}

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> <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 DefaultCopyToClipboardExampleComponent { } <dt-copy-to-clipboard> <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 DefaultCopyToClipboardExampleComponent { }

Imports

You have to import the DtCopyToClipboardModule when you want to use the dt-copy-to-clipboard:

@NgModule({
  imports: [
  DtCopyClipboardModule,
  ],
})
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()"> <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 CallbackCopyToClipboardExampleComponent { // tslint:disable-next-line:no-unused-variable _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()"> <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 CallbackCopyToClipboardExampleComponent { // tslint:disable-next-line:no-unused-variable _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'; }); } }

Disabled example

´ Loading interactive demo...
<dt-copy-to-clipboard #copyClipboard [disabled]="_toggleValue"> <textarea dtInput aria-label="Text that is copied to clipboard">https://inzx79.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <br/> <button dt-button (click)="_toggleValue = !_toggleValue">Toggle</button> export class DisabledCopyToClipboardExampleComponent { _toggleValue = true; } <dt-copy-to-clipboard #copyClipboard [disabled]="_toggleValue"> <textarea dtInput aria-label="Text that is copied to clipboard">https://inzx79.dynatrace.com/</textarea> <dt-copy-to-clipboard-label>Copy</dt-copy-to-clipboard-label> </dt-copy-to-clipboard> <br/> <button dt-button (click)="_toggleValue = !_toggleValue">Toggle</button> export class DisabledCopyToClipboardExampleComponent { _toggleValue = true; }

Dark theme

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <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 DarkCopyToClipboardExampleComponent {} <section class="dark" dtTheme=":dark"> <dt-copy-to-clipboard> <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 DarkCopyToClipboardExampleComponent {}

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 ContextCopyToClipboardExampleComponent { } <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 ContextCopyToClipboardExampleComponent { }