File

copyable-url-container/src/lib/copyable-url-container.component.ts

Description

Contains a url link and a button to copy it to the clipboard.

Metadata

Index

Methods
Inputs

Inputs

url
Type : string
Required :  true

Url to display

Methods

copyUrl
copyUrl()

Copys url to clipboard and shows a snackbar notification.

Returns : void
import { Component, inject, input } from '@angular/core';
import { HraCommonModule } from '@hra-ui/common';
import { ButtonsModule } from '@hra-ui/design-system/buttons';
import { IconsModule } from '@hra-ui/design-system/icons';
import { SnackbarService } from '@hra-ui/design-system/snackbar';
import { PlainTooltipDirective } from '@hra-ui/design-system/tooltips/plain-tooltip';

/**
 * Contains a url link and a button to copy it to the clipboard.
 */
@Component({
  selector: 'hra-copyable-url-container',
  imports: [HraCommonModule, ButtonsModule, IconsModule, PlainTooltipDirective],
  templateUrl: './copyable-url-container.component.html',
  styleUrl: './copyable-url-container.component.scss',
})
export class CopyableUrlContainerComponent {
  /** Url to display */
  readonly url = input.required<string>();

  /** Snackbar service */
  private readonly snackbar = inject(SnackbarService);

  /**
   * Copys url to clipboard and shows a snackbar notification.
   */
  copyUrl(): void {
    navigator.clipboard.writeText(this.url());
    this.snackbar.open('Link copied', '', false, 'start', { duration: 5000 });
  }
}
<ng-container hraFeature="copyable-url">
  <div class="link">
    <a
      mat-icon-button
      hraClickEvent
      target="_blank"
      rel="noopener noreferrer"
      hraPlainTooltip="Open in new tab"
      [attr.href]="url()"
    >
      <mat-icon>open_in_new</mat-icon>
    </a>
    <span class="text">
      {{ url() }}
    </span>
  </div>
  <button
    mat-button
    hraFeature="copy"
    class="copy"
    hraPlainTooltip="Copy link"
    [hraClickEvent]="{ url: url() }"
    (click)="copyUrl()"
  >
    <mat-icon>content_copy</mat-icon>
    Copy
  </button>
</ng-container>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""