What’s new in Angular CLI 8.1?

Angular CLI 8.1 is released with lot of interesting changes.

This release includes brand new options for the various commands.

The official Node.js version that is supported for Angular CLI 8.0+ is 10.9 or greater.

Flag !

Lets look into the latest updates related to flags.

ng doc

It helps to open the official documentation in browser from CLI and also searched for given keyword.

For example, if you need to search for pipes relates documentation by passing pipes as keyword in ng doc command.

ng doc pipes

This will help us to open the related documentation in browser.

ng doc <keyword> –search

we additionally have the following options to this command

ng doc pipes --search=true|false

When search option is true, searches all of angular.io. Otherwise, searches only API reference documentation. Default: false

The similar option can simplified with alias -s as following

ng doc pipes --s=true

The command needs to be ran inside a angular project definition. Otherwise, we will get following error message in CLI

The doc command requires to be run in an Angular project, but a project definition could not be found.

ng doc pipes -s=false

ng doc pipes -s=true

You can compare difference search option flag values in above couple of images.

The command now also allows us to search for particular version of documents.

For example, we can search for documents related forms in angular version 6 using following command

ng doc form -s=false --version 6

If we didn’t specify any version during search, the command will search angular version you are using in your project.

ng generate component – -skip-selector

CLI version 8.1 brings an option to generate a component without any selectors.

--skip-selector

For example, the following command generates a component with selector

ng generate component sidebar

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

whereas, the following command with skip selector generates a component without selector

ng generate component sidebar-ws –skip-selector

import { Component, OnInit } from '@angular/core';

@Component({
  templateUrl: './sidebar-ws.component.html',
  styleUrls: ['./sidebar-ws.component.css']
})
export class SidebarWsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

This new flag will be helpful when we are dealing with situation to create a component which doesn’t actually required a component.

Simple example, consider we need to redirect to error page when something went wrong in application. In that case, we simply redirect the page to specific component with help routing.

Thanks for reading. Please feel free to subscribe, share and support this blog.

Join 366 other followers

Advertisements

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" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 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.

Happy Coding!