### File

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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `rxap-copy-to-clipboard-button`
imports | `MatButtonModule` `ClipboardModule` `MatIconModule` `MatSnackBarModule`
styleUrls | `./copy-to-clipboard-button.component.scss`
templateUrl | `./copy-to-clipboard-button.component.html`

### Index

###### Properties
Readonly value
###### Methods
Public copied

### Methods

Public copied
`copied()`
Defined in src/lib/copy-to-clipboard-button/copy-to-clipboard-button.component.ts:34
Returns : `void`

### Properties

Readonly value
Default value : `input('')`
Defined in src/lib/copy-to-clipboard-button/copy-to-clipboard-button.component.ts:30

    import {
      ChangeDetectionStrategy,
      Component,
      inject,
      Inject,
      input,
      Input,
    } from '@angular/core';
    import {
      MatSnackBar,
      MatSnackBarModule,
    } from '@angular/material/snack-bar';
    import { MatIconModule } from '@angular/material/icon';
    import { ClipboardModule } from '@angular/cdk/clipboard';
    import { MatButtonModule } from '@angular/material/button';

    @Component({
        selector: 'rxap-copy-to-clipboard-button',
        templateUrl: './copy-to-clipboard-button.component.html',
        styleUrls: ['./copy-to-clipboard-button.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        imports: [
            MatButtonModule,
            ClipboardModule,
            MatIconModule,
            MatSnackBarModule,
        ]
    })
    export class CopyToClipboardButtonComponent {
      readonly value = input('');

      private readonly snackbar = inject(MatSnackBar);

      public copied() {
        this.snackbar.open($localize`Successfully copied to the clipboard.`, 'OK', {
          duration: 2500,
        });
      }
    }

    <button
      (cdkCopyToClipboardCopied)="copied()"
      (click)="$event.stopPropagation()"
      [cdkCopyToClipboard]="value()"
      mat-icon-button
      type="button"
    >
      <mat-icon>content_copy</mat-icon>
    </button>

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

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""