Tools

angular – copy to clipboard feature

Featured1 Comment

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 --&gt;
 
<!-- Add attribute appCopy in your html code --&gt;
 
<input appCopy type="text" #text1 value="hello world"&gt;
 
<!-- And refer font awesome in your index.html to view copy symbol --&gt;
 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;

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.

Happy Coding!

Advertisements

VS Code useful Tips and Tricks

Pandiyan MuruganLeave a comment

VS Code is one of the popular editor in the world of web development.

It’s became major part of my day to day web development cycle.

I’ve used lots of shortcuts or tricks or best practices over the period of time.

In this post, I would like to present to some of the steps that I’ve been using in my development works.

VS Code Insiders

Insiders is a pre-release of standard edition of vs code.

You can install and use it in parallel with standard edition.

Mostly, it’s a kind of nightly build. You will be getting updates daily or weekly basis based on commits happening in vs code insider.

Insider edition has a green icon whereas standard edition has an icon in blue in color.

When you start using insider, you’ll be the first person receiving the latest features and bug fixes compared to the one using standard edition.

Breadcrumbs

Sometimes we will be working with the small screen machines. Keeping the solution explorer always open isn’t an optimal solution when we are working on the small screen laptops. One of the solutions can be keeping the files hidden and opening whenever needed.

In that case, traversing between files or folders is bit difficult.

To resolve this problem, we have option called breadcrumbs in VS Code.

Breadcrumb navigation lets you jump to symbols and files in your workspace.

Breadcrumbs shows the current location and allows you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

You can modify the user settings by visiting the settings page using shortcut CTRL +, or visiting the option File>Preferences>settings

In the search bar, search for the option breadcrumbs. You can find the following UI

I usually enable the breadcrumbs for File Path, because don’t use symbol path navigation. You can use the available options based on your needs.

Traversing between files

Log Points

Log Points is one of favorite feature in recent times. Log point can be added similar to breakpoint in code.

A log point is represented by the diamond icon. Log Points are useful for injecting the logs while debugging.
A Log point is a variant of a breakpoint that does not “break” into the debugger but instead logs a message to the console. 

Just like regular breakpoints, Log points can be enabled or disabled and can also be controlled by a condition and/or hit count.

Why Log Points?

Mostly, when we are working with JavaScript or TypeScript we use console.log(..) for logging some messages. Sometimes we forgot to remove those debugging related messages while shipping application to Production or Customer.

When we are using Log Points, we don’t have to worry about this problem. Because Log Points message are available only in debugger mode.

Log messages are plain text but can include expressions to be evaluated within curly braces (‘{}’).

External Terminal

I’m great fan of Integrated terminal option since it is released. Even though I prefer external terminal to run the node related build commands.

Sometimes I accidentally close the VS Code instance, that time my terminal also get terminated. To avoid that I started using the external terminal build related commands.

The shortcut in Windows OS for VS Code to launch the external terminal is

Crtl + Shift + c

By default, the external terminal is set to command prompt of Windows. We can change it based on our needs.

For example, We can change it to Git bash or any other third party terminals.

You can use the settings page to change the mentioned changes like below

Summary

I will be updating this same post regularly based on the new tips or tricks if I come across anything new.

Happy Coding!