How to copy text to clipboard

Question

I am taking my first steps in Angular and I made a quote generator which is working fine; Now I want to add a button when clicked copies to clipboard the generated quote. I check some few links about copying to clipboard such as Angular 5 - Copy to clipboard but I do not know how to use it in my case.

This is the part in app.component.ts for the random part.

  getNewQuote($event: MouseEvent) {
    const quoteText = document.querySelector('.quote-text');
    this.randomNumber = Math.floor(Math.random() * (this.quotes.length));
    quoteText.innerHTML = this.quotes[this.randomNumber];

I have this in app.component.html for the copy button

    <i class="fa fa-files-o" (click)="copy()"></i>

I am very stuck on this I do not know how to copy the random quotes. How can I do this?

You can try this: https://www.npmjs.com/package/ngx-clipboard — Thorsten Rintelen, Sep 12 '20 at 10:27

Asaf · Accepted Answer · 2020-09-12T12:44:30.737

2

Angular provides an out-of-the-box copy to clipboard functionality through the cdk.

What you should do:

 <i class="fa fa-files-o" [cdkCopyToClipboard]="getNewQuote()"></i>

And don't forgot to include the module:

import {ClipboardModule} from '@angular/cdk/clipboard';

edited Sep 12 '20 at 12:44

answered Sep 12 '20 at 10:50

Asaf

1,446
9
17

thank you. Tried that but it gives me blank page i do not know why – Sep 18 '20 at 16:38
Oh got it it was because of my angular version Thank you so much! – Sep 18 '20 at 17:04

How to copy text to clipboard

1 Answers1