human-atlas
  1. Components
  2. CopyClipboardComponent

File

src/app/components/copy-clipboard/copy-clipboard.component.ts

Description

Displayes a card with API information with a copy button

Metadata

selector copy-clipboard
styleUrls ./copy-clipboard.component.scss
templateUrl ./copy-clipboard.component.html

Index

Methods
Inputs

Constructor

constructor(clipboard: Clipboard)
Defined in src/app/components/copy-clipboard/copy-clipboard.component.ts:13

Initializes Clipboard

Parameters :
Name Type Optional
clipboard Clipboard No

Inputs

clipBoardData
Type : CopyClipBoard[]
Default value : []
Defined in src/app/components/copy-clipboard/copy-clipboard.component.ts:13

Details of the APIs and buttons

Methods

copyData
copyData(request: string)
Defined in src/app/components/copy-clipboard/copy-clipboard.component.ts:19

Copies data inside the card to clipboard

Parameters :
Name Type Optional
request string No
Returns : void 
import { Component, Input } from '@angular/core';
import { CopyClipBoard } from './copy-clipboard';
import { Clipboard } from '@angular/cdk/clipboard';

/** Displayes a card with API information with a copy button */
@Component({
  selector: 'copy-clipboard',
  templateUrl: './copy-clipboard.component.html',
  styleUrls: ['./copy-clipboard.component.scss'],
})
export class CopyClipboardComponent {
  /** Details of the APIs and buttons */
  @Input() clipBoardData: CopyClipBoard[] = [];

  /** Initializes Clipboard */
  constructor(private readonly clipboard: Clipboard) {}

  /** Copies data inside the card to clipboard */
  copyData(request: string) {
    const splitted = request.split(' ');
    const url = splitted[1];
    this.clipboard.copy(url);
  }
}

<div class="clipboard-container" *ngFor="let data of clipBoardData">
  <mat-card class="url-card" id="url" [style.border-left]="data.borderColor">{{ data.url }}</mat-card>
  <div class="buttons">
    <button mat-raised-button class="copy-btn" (click)="copyData(data.url)">
      <span class="material-symbols-outlined icon">{{ data.plainButton.icon }}</span>
      {{ data.plainButton.label }}
    </button>
    <a mat-raised-button class="copy-btn tryme" href="{{ data.dynamicButton.url }}" target="_blank">
      {{ data.dynamicButton.label }}
    </a>
  </div>
</div>

./copy-clipboard.component.scss 

:host {
  .clipboard-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .url-card {
    justify-content: center;
    max-width: 37.25rem;
    background-color: rgb(235, 237, 239);
    border-left: solid rgb(22, 144, 198) 5px;
    padding: 1rem 1rem;
    overflow: hidden;
  }

  .buttons {
    display: flex;
    gap: 1rem;
  }

  .copy-btn {
    display: flex;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0rem 1.5rem;
    margin-left: 0.0625rem;
    min-width: 7.75rem;
    color: #444c65;
    border-radius: 6.25rem;
    height: 40px;
    background-color: #f7f2fa;
    box-shadow:
      0px 1px 2px rgba(0, 0, 0, 0.3),
      0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    white-space: normal;
    letter-spacing: 0;
  }

  ::ng-deep .mat-mdc-raised-button .mdc-button__label {
    display: flex;
    align-items: center;
  }

  .icon {
    margin-right: 5px;
  }

  @media screen and (max-width: 428px) {
    .clipboard-container {
      flex-direction: column;
    }

    .copy-btn,
    .tryme {
      width: 50%;
    }
  }

  @media screen and (max-width: 300px) {
    .buttons {
      flex-direction: column;
    }
    .copy-btn,
    .tryme {
      width: 100%;
    }
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""