### File

`src/lib/copy-to-clipboard/copy-to-clipboard.component.ts`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `rxap-copy-to-clipboard`
imports | `CopyToClipboardButtonComponent` `NgClass`
styleUrls | `./copy-to-clipboard.component.scss`
templateUrl | `./copy-to-clipboard.component.html`

### Index

###### Properties
Readonly active Readonly containerClass Readonly disabled Readonly isPositionAfter Readonly isPositionBefore Readonly position Readonly value
###### Inputs
active disabled value

### Inputs

active
Default value : `true`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:22

disabled
Default value : `false`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:23

value
Required : true
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:24

### Properties

Readonly active
Default value : `true`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:22

Readonly containerClass
Default value : `input<string>('flex flex-row gap-2')`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:26

Readonly disabled
Default value : `false`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:23

Readonly isPositionAfter
Default value : `computed(() => this.position() === 'after')`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:31

Readonly isPositionBefore
Default value : `computed(() => this.position() === 'before')`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:30

Readonly position
Default value : `input<'before' | 'after'>('before')`
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:28

Readonly value
Defined in src/lib/copy-to-clipboard/copy-to-clipboard.component.ts:24

    import {
      NgClass,
      NgIf,
    } from '@angular/common';
    import {
      ChangeDetectionStrategy,
      Component,
      computed,
      input,
    } from '@angular/core';
    import { CopyToClipboardButtonComponent } from '../copy-to-clipboard-button/copy-to-clipboard-button.component';

    @Component({
        selector: 'rxap-copy-to-clipboard',
        templateUrl: './copy-to-clipboard.component.html',
        styleUrls: ['./copy-to-clipboard.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
      imports: [ CopyToClipboardButtonComponent, NgClass ],
    })
    export class CopyToClipboardComponent {

      readonly active = input(true);
      readonly disabled = input(false);
      readonly value = input.required<string>();

      readonly containerClass = input<string>('flex flex-row gap-2');

      readonly position = input<'before' | 'after'>('before');

      readonly isPositionBefore = computed(() => this.position() === 'before');
      readonly isPositionAfter = computed(() => this.position() === 'after');

    }

    <div class="flex flex-row gap-2 items-center">
      @if (active() && isPositionBefore()) {
        <rxap-copy-to-clipboard-button [value]="value()" class="w-[40px]"></rxap-copy-to-clipboard-button>
      }
      <span #ref class="grow {{ containerClass() }}" [ngClass]="{ 'hidden': !ref.innerHTML.trim() }"><ng-content></ng-content></span>
      @if (!ref.innerHTML.trim()) {
        <span class="grow">{{ value() }}</span>
      }
      @if (active() && isPositionAfter()) {
        <rxap-copy-to-clipboard-button [value]="value()" class="w-[40px]"></rxap-copy-to-clipboard-button>
      }
    </div>

`./copy-to-clipboard.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""