Template literals | Template strings

Template literals in ES6 (EcmaScript) allows us to embed expressions to our string literals. We can use multi-line strings and string interpolation features with them.

Template literals are enclosed by the back-tick (` `) instead of double or single quotes.

var message = `single line string`;

// single line string

We can include place holders for string substitution using ${ } syntax

var expression = "place holder"; // string substitution
console.log(`this is a text with ${expression} in a line`);

// this is a text with place holder in a line

We can directly use expression interpolation to embed inline math

var a = 5;
var b = 5;

console.log(`the addition of a+b = ${a+b}`);
// the addition of a+b = 10

We can also call functions and use member functions in strings

function sample() { return "text from sample method"; }

console.log(`yes! ${sample()} and i am in uppercase`.toUpperCase());


The above code retrieves data from sample() method and converts it to uppercase in run-time.

Multiline Strings

We can achieve multi line strings, previously we used to insert new line character in our string

console.log(`First line
Second line`);
// First line 
// Second line

Raw strings

The special raw property, available on the first function argument of tagged template literals, allows you to access the raw strings as they were entered.

String.raw`Hi \n ${2+3}!`;
// "Hi \n 5!"

Tagged template literals

A more advanced form of template literals are tagged template literals. With them we able to modify the output of template literals using a function. The first argument contains an array of string literals. The second, and each argument after the first one, are the values of the processed substitution expressions. We can use any name to our function.

var a = 1;
var b = 2;

function tag(strings, ...values) {
 console.log(strings[0]); // "One "
 console.log(strings[1]); // " Two"
 console.log(strings[2]); // " Three"
 console.log(values[0]); // 1
 console.log(values[1]); // 2

tag`One ${ a } Two ${ b } Three`;

// One 
// Two 
// Three
// 1
// 2

Happy exploring EcmaScript 🙂

Angular 9 Tutorial : Set up Dev Environment

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Angular 9 Tutorial : Set up Dev Environment

A quick start tool is always helps the developer to save their valuable time and use those time in efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can help to create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node and npm. But feel free to install the latest edition to explore the latest features.

We can check the version of node and npm using following commands.

node -v

npm -v

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v


StackBlitz is an online IDE where you can create Angular & React projects that are immediately online & shareable via link… in just one click. It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type.

StackBlitz is a tool in the Cloud IDE category of a tech stack.

Read more here for StackBlitz docs.

Course Main Page

Angular 9 Tutorial for Beginners: Action Plan

Additional Reading

Just read this if you really want to get deep insight about npm

As a part of learning angular, I would suggest everyone learn and understand the basic concept of npm

Maybe by finding answers for few of questions listed below

  • What is npm?
  • What is the role of npm?
  • How to use it?
  • Why we are going to use it?

So, what is npm?

npm – node package manager

Let’s split the sentence and understand the meaning present in the abbreviation.


Here node.js is mentioned as the node. Node.js is a server-side JavaScript environment. It uses an asynchronous event-driven model and is designed for writing scalable Internet applications, notably web servers.


Modules of code grouped up into a component which can be used in various project or application.


Managing the dependencies with the various operation like install, uninstall, update and so on.

Now, we can frame our own definition for npm from above split up an explanation. So using npm, we can manage (install, uninstall, organize) the node.js packages in our project.

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.

npm has CLI terminal and website to search for packages.

What is the role of npm?

npm does N number of roles in various projects. I’m just mentioning the various steps which we are going to use in our upcoming posts in the end user developer point of view

  • install packages
  • uninstall packages
  • version maintenance of packages across the team
  • maintaining the dependencies

How to use it?

Simple, install Node.js

npm is distributed with Node.js- which means that when we download and install Node.js, we automatically get npm installed on our computer.

Using following command in terminal, we can check whether our toolset get installed successfully,

// to check node.js version
node -v

// to check npm version
npm -v


What is this packages.json? this is one of the important things we should get familiar if we are going for use npm in our projects.

  • packages.json file is like the registry of packages in our project.
  • it lists the packages that our project depends on.
  • allows us to specify the versions of a package that our project can use using semantic versioning rules.

How to create packages.json file?

Open terminal with your target folder location.

Type npm init and Enter, now you’ll be caught up with few questions. After you have answered most of the question, your file will get created.

name and version fields are mandatory fields.


If you are afraid of questions, we have another quick option.

Enter command npm init –yes


Using –yes argument option, the npm will create packages.json file with default values.

Install a package

npm install (in the package directory, no arguments) – Install the dependencies in the local node_modules folder.

In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package.

You can find detailed details of npm install options in this link

A package can be downloaded with the command:

npm install <package_name>

The --save and --save-dev install flags

The easier (and more awesome) way to add dependencies to your package.json is to do from the command line, flagging the npm install command with either --save or --save-dev, depending on how you’d like to use that dependency.

To add an entry to your package.json‘s dependencies:

npm install <package_name> --save

To add an entry to your package.json‘s devDependencies:

npm install <package_name> --save-dev

That’s it. Few lines have been copied from official documentation. :p

Let’s conclude, using npm we can manage number of packages in our projects easily.

Happy Coding!