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!

TypeScript – Quick view – Pt. 1

What is TypeScript?

  • TypeScript is a syntactic sugar for JavaScript.
  • TypeScript syntax is a superset of ES5 & ES6 syntax.
  • Every valid JavaScript code is also a TypeScript code.
The TypeScript compiler emits JavaScript. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript. This leads to JavaScript output that closely matches the TypeScript input.
TypeScript does not transform variable names, making tractable the direct debugging of emitted JavaScript. TypeScript optionally provides source maps, enabling source-level debugging. TypeScript tools typically emit JavaScript upon file save, preserving the test, edit, refresh cycle commonly used in JavaScript development.
It can improve your productivity by enabling rich tooling experience. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. 

Why TypeScript?

JavaScript is standardized through the ECMAScript standards. TypeScript supports most of the latest ECMAScript features (the various posts under ECMAScript can be found here). Some of the interesting features of latest ECMAScript like modules, lambda functions, classes, the spread operator, destructuring, template literals are supported in TypeScript.

TypeScript makes JavaScript more and reliable by having following features

  • Optional static typing
  • Supports the latest JavaScript features
  • Supports classes, interfaces, generics
  • More productive than JavaScript

Optional static typing

JavaScript is dynamic type, it does not know type of variable until we initialize it. Typescript provides types support to code. Using static typing we can define the data type of the variable.

var x : string = "Make a smile";

Here we have declared a variable of type string. The popular data types available in TypeScript are Boolean, Number, String, Array, Tuple, Enum, Any, and etc.

We have mentioned TypeScript is optional static typing.

What does it mean?

It means, we don’t have to mention the exact type of variable always. If we don’t wish to mention the type of variable, we can user any type to declare the variables. Once we are initializing the any type variable, it will decide the type of variable based on the values.

example:

var y: any = “Clear Screen”;

Supports the latest JavaScript features

Most features of ECMAScript has been supported by TypeScript.

The latest features of ECMAScript like

are supported in TypeScript as well. We can discuss about those topics in upcoming blog posts.

More productive than JavaScript

If the developer is already familiar with any of the Object Oriented Programming, it will be easy for them to adopt to TypeScript. The syntax are similar to Object Oriented language like C#.

As C# developer, in my personal experience I felt learning and understanding the syntax of TypeScript is easy.

IDEs can help you throwing error right away when you are coding itself. So you can focus more on coding and less time at debugging. Enhanced IDEs provides greater support to this language which provides significant productivity compared working with JavaScript.

 

This is just an introductory post, we can discuss more topics under TypeScript in upcoming posts. Please share your thoughts in comments section and follow this site for more updates.

 

Happy Coding!