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.

<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>

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").

Inputs

Name Type Default Description
variant 'primary' | 'secondary' primary Defines the variant of the embedded copy-to-clipboard button.

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.

<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>

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.

<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>

Dark theme

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

<section class="dt-example-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>

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.

<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>

Example within context dialog

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

<dt-context-dialog
  #contextdialog
  color="cta"
  aria-label="Show more actions"
  ariaLabelClose="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>