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!');
  }

Adding autofocus to an input field in an Angular 5 Bootstrap 4 application

A couple of days back I faced trouble adding autofocus to an input field that was rendered inside a Bootstrap modal. The project is built using Angular 5 and Bootstrap 4. Also, I was using ng-bootstrap component library. The issue was that input field was auto focussed only the first time I opened the modal. In subsequent requests, the input field was not auto-focussed. It took me sometime to figure out why this is happening and how to fix the problem. In this quick post, I will walk you through how to enable autofocus in an input field in an Angular 5 Bootstrap 4 application.Read More »

Updating Angular Projects Generated By Angular CLI To Latest Version

Today, I wanted to update one of my starter projects to use the latest version of Angular. I built starter project with Angular 5.0.0 and I wanted to update it to latest Angular version which is 5.0.4. Below are the steps, you need to follow to update your project. Navigate to your project working directory and do the following:

Step 1: Remove node_modules

$ rm -rf node_modules/

Step 2: Update angular-cli dependency to latest version

You can check latest version at https://github.com/angular/angular-cli/releases.

Once you know the version, update the @angular/cli version in the package.json to the latest version.

Step 3: Install and run the upgrade

$ yarn install
$ yarn upgrade

yarn upgrade will update all the dependencies to the latest version.

Step 4: Run the application

Now, you can run the application using the yarn start -o command.

Building an Angular 4 Drag And Drop Application in 15 Minutes

Last week, I had to build an application that required drag and drop functionality. This made me learn about couple of third party Angular 4 drag-and-drop APIs. The popular options in Angular 2+ world are ng2-dragula and ng2-dnd. I found ng2-dnd more extensible and feature rich so I used it in my application. In today’s blog, we will learn how to add drag-and-drop functionality to a todo application. We will use Addy Osmani Angular 4 todomvc application as the starting point. This post does not cover basics of how to build Angular 4 applications. There are many good references on the web that can teach you building Angular 4 applications from scratch.

Read More »

Angular 4 Karma Loading CSS in Unit Testing

Today, while writing unit test for one of my Angular 4 application I wanted to load bootstrap css. My components uses Bootstrap for styling. The problem is when test run they don’t load CSS so they are not rendered correctly during unit tests. Angular 4 relies on Karma as test runner for unit tests. To load your external CSS file like bootstrap, you have to add files option to karma.conf.js. After making the change, run your test cases again.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    singleRun: false,
    files: [
      "node_modules/bootstrap/bootstrap.min.css",
      "node_modules/jquery/dist/jquery.min.js"
    ]
  });
};