Adding copy to clipboard functionality in Angular application

Today, I had to work on an application that required copy to clipboard functionality. Below is a step by step tutorial that will help you add copy to clipboard functionality. The reason I had to implement copy to clipboard functionality is that with dnd-list copy feature gets broken so I needed a way to give user a copy functionality.

Angular version being used in Angular 5.

Step 1: Create Angular application

$ ng new myapp

Step 2: Install ngx-clipboard and ng2-toastr

$ npm install --save ng2-toastr ngx-clipboard

Step 3: Configure modules

In the app.module.ts, add ClipboardModule and ToastModule

import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { ClipboardModule } from 'ngx-clipboard';
@NgModule({
    imports: [
        BrowserAnimationsModule,
        ToastModule.forRoot(),
        ClipboardModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Add ngx-clipboard directive

Update app.component.html

<div class="col-11 p-2 lh-condensed">
      <h6 class="font-weight-bold">
        {{task.title}}
        <div class="float-right">
          <i class="ft-chevron-down"></i>
          <div class="dropdown-menu">
            Copy
            Edit
            Delete
          </div>
        </div>
      </h6>
</div>

Update app.component.html

  copyToClipboard() {
    this.toastr.success('Copied to clipboard', 'Success!');
  }