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>