angular – copy to clipboard feature

We all came across this kind of feature – copy to clipboard.

Basically, the aim of this feature is to help the end user to quickly copy some text to clipboard. Instead of selecting particular text and clicking keyboard shortcut for copying text, some websites will provide us a icon to simplify the task.

Once we click that icon or button, the required text will get copy into the clipboard.

I used copy to clipboard option most of the time in Github,

And that’s the base story.

Why?

Few months back, I was supposed to implement the same feature in one of my angular application.

I’m aware that how to do this feature in plain JavaScript. The typical copy function will look like the below snippet

But I hesitated to follow the same structure.

Analyzed existing npm packages

I have gone through various npm packages for copy clipboard with following features expectation in mind

  • Copy icon should get automatically created
  • Selection & Copy function should be generic
  • The code should reused and light weight
  • Minimal effort to implement

Most of the npm plugins available didn’t fulfilled my expectation.

The popular plugin expected the developer to create and pass the text which needs to copied to the copy to clipboard function.

For me, this looks weird!

If a paragraph is having 100 lines, sending those entire text to a plugin doesn’t make sense to me. So I decided to create a angular directive based on my expectation.

Later, I published it as a separate npm package. And the package name is

angular-clipboard-auto

How it works?

Installation

To install this library, run:

$ npm install angular-clipboard-auto --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install angular-clipboard-auto

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import your library
import { ClipboardModule } from 'angular-clipboard-auto';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify your library as an import
    ClipboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
  
<!-- Add attribute appCopy in your html code -->
  
<input appCopy type="text" #text1 value="hello world">
  
<!-- And refer font awesome in your index.html to view copy symbol -->
  
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

That’s it!

TLTR;

All we have to do is

  • Add appCopy as attribute in text field HTML
  • Import fontawesome css

The copy icon will automatically get created next to your input field and you can use the feature right away.

The npm package will take care of all the background task seamlessly.

And also you can find the working copy of angular application in following path

https://stackblitz.com/edit/angular-clipboard

Sample snippet of HTML block

If you feel the implementation looks like, feel free to star ⭐️ the repository in GitHub and share with your friends.

Angular Clipboard Auto - Create a copy icon to your text element with one attribute. | Product Hunt Embed

Happy Coding!

Advertisements

ECMAScript – Trailing Commas

JavaScript allowed trailing commas in array literals since the beginning. Trailing commas in other places have added in the later edition of ECMAScript.

What is trailing comma & why?

Trailing commas is also called as final commas.

It can be used while if you are adding new parameters or property to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

Arrays, Object literals, function parameters allow trailing commas. However, JSON doesn’t allow trailing commas.

Trailing commas in Array literals

JavaScript allows the trailing commas in arrays.

literals1

If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped.

literals2

However, the final comma in the array is ignored.

Object literals

Trailing comma is supported in Object literals from the ECMAScript 5 edition.

literals3.PNG

Trailing commas in functions

ECMAScript 2017 allows trailing commas in function parameter lists.

Trailing commas allowed function definition and function calls. Trailing commas don’t affect the length property of function declarations or their arguments object.

literals4.PNG

Function parameters with commas only are invalid which will throw SyntaxError.

literals5

What about Internet Explorer Support?

If we are using babel to convert our scripts to native JavaScript to support Internet Explorer. We don’t have to worry about the compatibility.

The babel will convert our scripts with trailing commas to support the IE.

Example: It will remove the commas while building the package.

Left side: Our ECMAScript code

Right side: Equivalent Code generated by babel

literals6.PNG

makes version-control diffs cleaner and editing code might be less troublesome

Let’s talk about the main advantage, the Version control support.

Check out the below sample, I’m trying to add an entry to list to two arrays.

One has trailing commas and other not. When we are adding an entry to an array which has trailing comma, the GIT diff looks clean. That’s the main advantage of this whole concept.

When we are having a trailing comma, it only shows the addition of entry.

gitliteral

 

And again, its based every individual to decide whether they want to use this concept or not.

Cheers,

Happy Coding!