Copy

The <go-copy> component should be used for any instance where we want to provide a user a way to copy information from the page by using a button.

Bindings


  @Input() text: string;

text

This is the text that will be copied to a users clipboard when they click the button.

Click the button to copy the link!google.com


  <a [href]="url">Click the button to copy the link!</a>
  <go-copy [text]="url"></go-copy>

The GoCopyCardLink directive can be applied to a go-copy within a go-card to enable the ability to copy the url to that specific go-card.

To use the directive, complete the following steps:

Add a go-copy with a goCopyCardLink directive to the go-card-header element of the go-card you wish to be able to copy a link to.
Add an id attribute to the go-card.
Pass the same value you set for the go-card’s id attribute to the cardId input of the goCopyCardLink directive.
Add a class of go-heading--no-wrap to the h2 tag within the card’s go-card-header (this is necessary to enable the go-copy to be positioned correctly next to the card header).

Example implementation (code for this card):


  <go-card class="go-column go-column--100" id="go-copy-card-link-directive">
    <ng-container go-card-header>
      <h2 class="go-heading-2 go-heading--no-wrap">goCopyCardLink Directive</h2>
      <go-copy cardId="go-copy-card-link-directive" goCopyCardLink></go-copy>
    </ng-container>
    <ng-container go-card-content>
      <!-- card content here -->
    </ng-container>
  </go-card>

Copy

Usage

Bindings

text

Basic Example

goCopyCardLink Directive

Example implementation (code for this card):