Build your First Angular 9 App with Example | Tutorial for Beginners

Build your First Angular 9 App with Example | Tutorial for Beginners

In this Angular 9 tutorial, we’ll take you step by step on a journey to build an example Angular application from scratch that uses Angular 9. You'll learn: How to install the latest version of Angular CLI, How to initialize a new project, Understand and work with modules and components, Understand Angular template syntax, particularly event and property bindings, Listen for click events and update the UI when data changes.

In this tutorial, we’ll take you step by step on a journey to build an example Angular application from scratch that uses Angular 9

You'll learn from this tutorial:

  • How to install the latest version of Angular CLI,

  • How to initialize a new project,

  • Understand and work with modules and components,

  • Understand Angular template syntax, particularly event and property bindings,

  • Listen for click events and update the UI when data changes.

This tutorial is divided into the following steps:

  • Step 1 - Installing Angular CLI 9
  • Step 2 - Initializing our Project
  • Step 3 - Understanding Angular Modules & Components
  • Step 4 - Adding our HTML Template and Styles
  • Step 5 - Understanding Angular Template Syntax
  • Step 6 - Listenning for Click Events on the Buttons and Get their Associated Values
  • Step 7 - Displaying the Value of Variables in the Template

You'll need to have the following prerequisites for a better understanding of this tutorial:

A working knowledge of HTML, CSS and JavaScript/TypeScript. You don't need to be an expert in TypeScript but a familiarity with OOP concepts such as classes and constructors is required.
Node.js and NPM installed on your development machine.
You can check out this tutorial for how to set up a development environment for Angular on Ubuntu.

Step 1 - Installing Angular CLI 9

Let’s start with the first step, where we’ll install the latest version of Angular CLI.

Angular CLI is the official tool for initializing and working with Angular projects. Open a new terminal on Ubuntu/macOS or a command prompt on Windows and run the following command:

$ npm install -g @angular/[email protected]

At the time of this writing, we need to add the @next tag to install the latest pre-release version of Angular CLI.

Step 2 - Initializing our Project

If you have installed Angular CLI in your machine, let's use it to initialize a new project. Head back to your terminal or command prompt and simply run the following command:

$ ng new angular-9-example-calculator

Before generating your project, the CLI will prompt you if you would like to add routing to your project - You can answer No because we'll not be using the router in this example. For the stylesheets format, let's go with CSS.

Next, let's start a live-reload development server using the following commands:

$ cd ./angular-9-example-calculator
$ ng serve

The server will be running at the http://localhost:4200 address.

Step 3 - Understanding Angular Modules & Components

Angular adheres to the modular and component-based architectures.

The modular architecture allows you to organize your Angular application in modules.

From the Angular docs, this is how a module is defined:

The Angular platform itself is comprised of a set of built-in modules such as the core module, FormsModule, and HttpClientModule, etc.

A simple rule is creating a module for each feature of your application. For example, authentication can be isolated in each own module.

Note: In our Angular 9 project generated with the CLI, we already have a root module which, by convention, named AppModule.

Open the src/app/app.module.ts file, you should see the following code which creates an NgModule:

Note: You can generate a new module using the ng generate module command.

Since this is our first example, let's keep it simple and use the root module for encapsulating our calculator code.

What About Angular Components?
The component-based architecture allows you to use components to compose your application.

Note: In our Angular 9 project generated with the CLI, we already have a root component which is, by convention, named AppComponent.

A component controls a part of the screen of your application. In terms of code, it is simply a TypeScript class (decorated with @Component) with an HTML template for rendering the view and a stylesheets file for presentation.

Head to a new terminal or command prompt, go to your project's directory and run the following command:

$ ng generate component calculator --skipTests 

We use --skipTests to instruct the CLI to skip generating a file for component tests.

The CLI has generated the following files in the src/app/calculator folder:

src/app/calculator/calculator.component.css for CSS styles.
src/app/calculator/calculator.component.html for the component's template or the view.
src/app/calculator/calculator.component.ts for the component logic.

Go ahead and open the ```src/app/calculator/calculator.component.ts``` file, you should see the following code:
import { Component, OnInit } from '@angular/core';

  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
export class CalculatorComponent implements OnInit {

  constructor() { }

  ngOnInit() {


We first define a TypeScript class and decorate it with the @Component() decorator which provides the following metadata:

selector which is used to provide a tag name for the component,just like regular HTML tags except that they are only available in your Angular app.
templateUrl which is used to link an HTML template for rendering the view of the component. You can also use an inline template with the template property instead.
styleUrls which is used to assign stylesheets files for styling the view of the component.
Here is the magic of Angular! We can invoke our component using the <app-calculator> tag. It's like HTML tags but these are custom tags that are only available inside your Angular application.

Go ahead and open the src/app/app.component.html file, which is the template associated with the root component of our application which means it gets first rendered when the app is bootstrapped, remove the existing markup and add:


Step 4: Adding our HTML Template and Styles

Let's now implement our component.

We'll be using the HTML and CSS code from this JS fiddle to create our component UI.

Open the src/app/calculator/calculator.component.html file and add:

<div class="calculator">

  <input type="text" class="calculator-screen" value="0" disabled />

  <div class="calculator-keys">

    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">&times;</button>
    <button type="button" class="operator" value="/">&divide;</button>

    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>

    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>

    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>

    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>

    <button type="button" class="equal-sign" value="=">=</button>


Angular allows you to use most of the regular HTML tags to build the views of your app. We have a set of divisions with input and button elements.

Next, open the src/app/calculator/calculator.component.css file and add the following CSS styles:

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;

  .calculator-screen {
    width: 100%;
    font-size: 5rem;
    height: 80px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;

  button {
    height: 60px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #c4c4c4;
    background-color: transparent;
    font-size: 2rem;
    color: #333;
    background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
    text-shadow: 0 1px rgba(255,255,255,.4);

  button:hover {
    background-color: #eaeaea;

  .operator {
    color: #337cac;

  .all-clear {
    background-color: #f0595f;
    border-color: #b0353a;
    color: #fff;

  .all-clear:hover {
    background-color: #f17377;

  .equal-sign {
    background-color: #2e86c0;
    border-color: #337cac;
    color: #fff;
    height: 100%;
    grid-area: 2 / 4 / 6 / 5;

  .equal-sign:hover {
    background-color: #4e9ed4;

  .calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;

Next, let's add some global styles. Open the src/styles.css file and add:

html {
    font-size: 62.5%;
    box-sizing: border-box;

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;

Global styles will be applied to all the components of our app where component styles are scoped to that component.

Go to your app in your web browser, you'll see the following UI:

At this point, this is a regular HTML file which doesn't include any Angular code.

If you are building your app with plain JavaScript, you'll need to query the DOM elements and attach your defined functions to various events to implement your calculator but you don't need to do that in our case thanks to the Angular template syntax.

Step 5 - Understanding Angular Template Syntax

Angular provides a powerful syntax that extends regular HTML with various constructs for interpolating variables, binding methods to events, or iterating over arrays of data.

We'll be particularly learning about event and property bindings.

What is Data Binding?
Data binding is a mechansim implemented in most modern frameworks that establishes a connection between the component view and the data in the component's class in such a way that when the data variables changes, the elements that are bound to the data reflect changes automatically and vice versa.

With Angular data bindings, you don't need to manually push data from your component to the DOM and back. This means you don't need to call methods like querySelector() or querySelectorAll() and listenning for events to synchronize the views with data changes and vice versa. This is done automatically for you!

Angular provides four types of data binding depending on how data flows i.e from the component to the DOM, from the DOM to the component or both ways:

or interpolation which is used when you want to display data from the component in the associated view. For example, if you defined a foobar variable in your component, you can display its value using.

[ ] or property binding which is used when you want to push data to a property of an element in the DOM. It binds a variable in the component to an attribute of a DOM such as the value attribue of an <input> tag. For example: <input type="text" [value]="foobar">.

( ) or event binding which is used to listen for DOM events and bind them to methods in your component. For example: <button (click)="runAction()">Click Me</button> - The runAction() method will be called so it needs to be defined in the component class.

[( )] or two-way data binding which is used if you want data to flow in both ways. For example: <input type="text" [(ngModel)]="foobar">. The input element and foobar will have the same value and when one changes, the other one changes to the same value accordingly. We use the banana in the box syntax which combines brackets and parentheses for two-way data binding. ngModel is a special directive that binds to the value attribute of the <input> and <textarea> elements but you can constrcut two-way data binding for any property in the DOM or component.

Now let's apply this knowledge to make a functional Angular app.

Step 6 - Listenning for Click Events on the Buttons and Get their Associated Values

Basically, we want to get the values associated with the clicked buttons which can be either a number or a type of an operation. After calculating the result, we want to display it in the result element.

In the template, we have four sets of keys:

digits (0-9),
operators (+, -, *, /, =),
a decimal point (.)
and a reset key.

Let's use Angular event binding to listen for clicks on the buttons and determine what type of key was clicked.

Defining Some Needed Variables
Open the src/app/calculator/calculator.component.ts file and start by defining the following variables in the component:

export class CalculatorComponent implements OnInit {

  currentNumber = '0';
  firstOperand = null;
  operator = null;
  waitForSecondNumber = false;	

The currentNumber variable holds the string that will be displayed in the result input element.

The ```firstOperand``` variable holds the value of the first operand of the operation.

The ```operator``` variable holds the operation.

The ```waitForSecondNumber``` variable holds a boolean value indicating if the user has finished typing the first operand and ready to enter the second operand of the operation.

**Defining Listenning Methods**

Next, define the ```getNumber()``` method that will be used to get the current number:
public getNumber(v: string){
      this.currentNumber = v;
      this.waitForSecondNumber = false;
      this.currentNumber === '0'? this.currentNumber = v: this.currentNumber += v;


Next, define the getDecimal() method which appends the decimal point to the current number:

        this.currentNumber += '.'; 

Next, define the doCalculation() method which performs the calculation depending on the operator type:

private doCalculation(op , secondOp){
    switch (op){
      case '+':
      return this.firstOperand += secondOp; 
      case '-': 
      return this.firstOperand -= secondOp; 
      case '*': 
      return this.firstOperand *= secondOp; 
      case '/': 
      return this.firstOperand /= secondOp; 
      case '=':
      return secondOp;

Next, define the getOperation() that will be used to get the performed operation:

public getOperation(op: string){

    if(this.firstOperand === null){
      this.firstOperand = Number(this.currentNumber);

    }else if(this.operator){
      const result = this.doCalculation(this.operator , Number(this.currentNumber))
      this.currentNumber = String(result);
      this.firstOperand = result;
    this.operator = op;
    this.waitForSecondNumber = true;



Finally, define the clear() method that will be used to clear the result area and reset the calculations:

public clear(){
    this.currentNumber = '0';
    this.firstOperand = null;
    this.operator = null;
    this.waitForSecondNumber = false;

Now, you need to use event binding to bind these methods to the template.

We need to use Angular event binding to bind the getNumber() method to the click event of buttons. Changte your component template as follows:

<div class="calculator">

  <input type="text" class="calculator-screen" disabled />

  <div class="calculator-keys">

    <!-- [...] -->

    <button type="button" (click) = "getNumber('7')" value="7">7</button>
    <button type="button" (click) = "getNumber('8')" value="8">8</button>
    <button type="button" (click) = "getNumber('9')" value="9">9</button>

    <button type="button" (click) = "getNumber('4')" value="4">4</button>
    <button type="button" (click) = "getNumber('5')" value="5">5</button>
    <button type="button" (click) = "getNumber('6')" value="6">6</button>

    <button type="button" (click) = "getNumber('1')" value="1">1</button>
    <button type="button" (click) = "getNumber('2')" value="2">2</button>
    <button type="button" (click) = "getNumber('3')" value="3">3</button>

    <button type="button" (click) = "getNumber('0')" value="0">0</button>
    <!-- [...] -->

We use () around the click event of the button to create an event binding.

Next, let's bind the getOperation(), getDecimal() and clear() methods to the click event of their respective buttons:

<div class="calculator-keys">

    <button type="button" (click) = "getOperation('+')" class="operator" value="+">+</button>
    <button type="button" (click) = "getOperation('-')" class="operator" value="-">-</button>
    <button type="button" (click) = "getOperation('*')" class="operator" value="*">&times;</button>
    <button type="button" (click) = "getOperation('/')" class="operator" value="/">&divide;</button>

    <!-- [...] -->

    <button type="button" (click) = "getDecimal()" class="decimal" value=".">.</button>
    <button type="button" (click) = "clear()"  class="all-clear" value="all-clear">AC</button>

    <button type="button" (click) = "getOperation('=')" class="equal-sign" value="=">=</button>


Step 7 - Displaying the Value of the Variable in the Template

Now let's display the value of the currentNumber variable that contains the value of the typed number by binding to variable to the value attribute of the <input> element:

<div class="calculator">

  <input type="text" class="calculator-screen" [value]="currentNumber" disabled />

  <!-- [...] -->	

We use [] around the value attribute to create a property binding.

The currentNumber variable will also contain the final result of the operation.


Throughout this step by step tutorial, you learned to build an Angular application from scratch using the latest Angular 9 version.

You have learned how to install Angular CLI v9 and create a new project. The tutorial also helps you learn about modules and components, create a component, add global types and components, and see different types of data constraints.

This article has ended, If you find the article useful, please share it with everyone.

Thank you for reading!

Important reasons for developers to adopt Angular JS development

 Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular has been a top choice for web development and it's the latest version AngularJS has gained popularity in the industry. This java script framework has created its prominent position in creating web apps.
Regardless of whether there are numerous different systems accessible for web development, AngularJS can support among them all. Since its introduction in the market, Angular has been creating waves in the market.


Angular js is a powerful framework that was developed by Google. It is used to build dynamic apps with power-packed features. It was first introduced in 2010 and created by developers at Google. This framework was created to simplify and remove the challenges in creating dynamic apps. It uses HTML, CSS, and java script to create dynamic single-page applications. Angular Js is inclusive of Mongo DB and it is a frontend fragment of Mean Stack. In the developer's community, Angular is considered as a reliable and fast Java script framework. Many popular apps like PayPal. You tube, Netflix, the guardian, Lego are built using the AngularJS framework.

In this blog, we are listing some compelling reasons to pick angular development to familiarize you with its potential

• Open-source framework: It is not a library but open-source frameworks that enable the developers to build well-performing single page web applications. Just after its launch, it became hugely popular among the developers and it is not going to come at a halt.

• Simplified MVC structure: Developers use AngularJS to build robust and interactive web applications. AngularJS framework uses MVC architecture to create interactive applications. AngularJS makes it easy for developers to create apps as they are only required to split the applications.

• Extensive community: As angular is built by Google, it is backed by a very large community of professionals. The Angular JS conferences of the professionals are held all over the world. Hackathons are also organized in IT communities that include some professional and skilled engineers who can help with the queries and questions related to Angular.

• Declarative code system: In Angular JS developers can create declarative patterns by using declarative paradigms. It enables developers to be less heavy, and easy to read. In this framework, the developers get data models that are not too complex to write that abolishes the need to use any getter/setters and with easy data manipulation.

• Two-way data binding: It is one of the impeccable features that makes Angularjs popular in the developers' community. It allows seamless projections of the models and data binding. In this framework, any changes in the user interface make an impact on the application objects. The developers are not required to fresh the cycle and that makes it vulnerable to bugs.

• Using directives: AngularJS makes use of Directives as the developers can build custom HTML tags that function as custom widgets and it can be possible using directives. Its implications are also in the case of the use of decorating components and manipulation of DOM elements in appealing ways.

• Enterprise-level testing: When using Angular JS there is no need for demanding any other supplementary framework or additional plugins. In the process, parts of applications are put in the angular framework which is not too complex for manipulation. In module separation, developers can load essential services in an effective way for the performance of automatic testing.

• Client-side situation: AngularJS mainly works at the client-side and it is fully compatible with both web and mobile browsers. It can function with any projects without the need for any backend notifications. The developers can easily use AngularJS for the front end of applications.

• Easy to use: AngularJS is rich with its features and facilitates developers to reduce any need for writing codes. It reduces the burden of developers by the application of MVC architecture and data models.

Many other significant features make AngularJS prioritize by the developers than other Javascript frameworks. The above-mentioned reasons have made it the top choice for reputed companies all across the globe for web development. Developers at the company master the skills to work with Angular JS development for web. The company is equipped with dedicated professionals having sound technical knowledge of working with AngularJS. We offer offshore services to extend our reach all across the globe with various models. We have more than 15 years of experience in the industry that we use to deliver high-quality solutions by leveraging the latest technology and quality standards.

Best 17 Angular Libraries Every Angular Developers Should Know in 2019

Best 17 Angular Libraries Every Angular Developers Should Know in 2019

In this article, we list 17 useful Angular libraries that can help as you develop applications with Angular.

Angular is a web development framework for building robust single-page applications and systems. Developed and maintained by Google and community maintainers, Angular is a great library for building large scale web applications.

Angular has a huge and active community, thus, a lot of libraries have been introduced by the community to plug holes and extend the tooling provided by Angular. Today, we’ll look at some libraries that can be introduced into existing applications — libraries ranging from utility libraries to UI component libraries.

1. ng-bootstrap

It seems fair to start with the Angular implementation of the most popular UI library. The ng-bootstrap library was built from the top down using TypeScript. Unlike the previous version, it has dropped jQuery as a dependency, specifying Bootstrap’s CSS as its only other dependency. With most JavaScript components implemented, the library seems like a complete solution when using Bootstrap with Angular — as active development is ongoing, more components will be included. With almost 7k stars on GitHub, ng-bootstrap seems like a very popular choice for a lot of Angular developers.

The Angular.js version of this project is still available here, although it isn’t actively maintained.

2. Angular Google Maps

Using the Google Maps library in Angular is always a serious hassle because the library is loaded using a script tag, so type definitions aren’t readily available. This causes some compile errors that need a lot of hacking to get rid of.

The Angular Google Maps library provides services and directives for implementing Google Maps services. There are directives available for creating maps, using markers, etc. The library also provides an async function that is useful for checking if the Google Maps library is loaded on the webpage.

The project has amassed almost 2k stars on GitHub. Visit their documentation to get started.

3. ngx-translate

Building an application that supports multiple languages can be a serious struggle, especially for single-page applications. The ngx-translate is a great library for managing multiple languages in your Angular application. It provides services to load translations that can be used throughout the application. Translations can be defined and loaded using the TranslateService, and onChange listeners are also available for handling language changes within the application.

The setup is pretty straightforward, and the library is well documented with detailed examples. Visit their GitHub page to get started.

4. Angular2-jwt

Managing single-page applications that use web tokens for authentication usually requires using interceptors to append headers to network requests. While this is easy to implement, it is difficult to filter out requests that don’t require access tokens. This is where this impressive library comes in. Using the angular-jwt package by Auth0, you can load access tokens from the local storage or session storage. It provides an HttpInterceptor that appends authentication headers to the requests. The ability to blacklist or whitelist a domain is also available.

With almost 2k stars on GitHub, it is a well-documented library with adequate examples and only requires a few steps to get started.

5. AngularFire2

Looking to implement real-time functionality in your Angular application? Well look no further, this library uses the power of RxJS, Firebase and Angular to deliver data synchronization in real time. It also provides services and providers to query documents and collections on Cloud Firebase and the realtime database, handles authentication using Firebase, handles file upload to Cloud Storage, and sends Push Notifications. The package also supports server-side rendering and offline functionality. You can easily import each individual module to handle whichever functionality is required in your application. All documentation can be found in the library’s GitHub page.

6. ng2-file-upload

Handling file uploads in any single-page application isn’t a task that’s fun to deal with. It would be great if an external library could handle file upload within your web application. Valon-software, the makers of ngx-bootstrap, has you covered with ng2-file-upload, a library that makes file upload a breeze.

The library supports drag-and-drop functionality alongside the good old file select implementation. It provides a utility class (FileUploader) that handles the different file upload methods. It also provides events to monitor the file upload progress, as well as errors and success during the upload.

The library is actively maintained and has almost 2k stars on Github.

7. Angular Material 2

The list wouldn’t be complete without mentioning a library that implements Google’s Material Design specifications. Angular Material 2 is a components library created by the Angular team. It features a set of components implementing the Material Design specs, ranging from buttons to dialogs, bottom sheets, etc. It features fully customizable themes and a rich set of components that can be used to quickly build an application. Angular Material 2 comes with almost 40 components, with more components under development and four pre-built themes.

Get started with Angular Material 2 by visiting their documentation or GitHub page.

8. ngrx/store

Managing state in small applications isn’t really complicated and state can be easily managed within individual components, but when there’s a need to share data between several components, the need for a proper state management system arises. NgRx offers reactive libraries optimized for Angular. It offers reactive statement for Angular in a package called ngrx/store. This package uses RxJS technologies to offer state management similar to Redux. The store allows developers write consistent and performant applications in a state-controlled environment. Very similar to Redux, the ngrx/store library uses Action, Reducers, Select and Store to manage the data flow within Angular applications. Get started with ngrx/store by following the steps listed in the library’s documentation.

9. Cloudinary Angular SDK

Cloudinary is SaaS web platform for managing media assets on mobile and web applications. It provides services for upload, storage, manipulation and delivery of media assets. Cloudinary offers an SDK for Angular that can be used in Angular applications for resizing and image conversion. The SDK can also be used for delivering different image sizes on different screens. It allows for easy delivery of video and image assets from Cloudinary’s storage.

Visit Cloudinary’s website to read more about about end-to-end management of media assets. The SDK can be found here on GitHub.

10. ng2-pdf-viewer

The ng2-pdf-viewer is a library for viewing and interacting with PDFs on a web application. The library providers a component for rendering PDF documents. The component can also be used for performing operations on the selected PDF like: resizing, rotating, searching through the document, etc. You can render files locally or provide a link to an external document. This library is great for managing PDF files on your web application, and there’s a lot it can handle using directives.

Visit their official documentation page or their page on GitHub.

11. ngx-charts

When working with data in a web application, the need for data visualization arises, thus the need for a data visualization library that can handle various forms of customizations while rendering. ngx-charts is quite interesting because their charts rely mostly on using Angular to animate SVGs, which offers more speed and flexibility as the library has been optimized for use in Angular.

It also uses d3 for math functions, scales and axis, etc. It comes with ten or more color schemes while making the charts fully customizable using CSS. Visit their demo page to view the different themes and color schemes available and their GitHub page to get started with the library. The library has garnered almost 3k stars on GitHub and is actively maintained.

12. ng-seed/universal

This great library has so many features packaged within it, it should be the Swiss army knife for every Angular developer. It consists of the following packages:

  • ngx-meta: for handling meta tags, title tags and SEO enhancement.
  • ngx-cache: for managing application wide data.
  • ngx-auth: for managing jwt-based authentication.

It comes with a couple of other packages for handling server-side rendering, lazy loading, state management and webpack configurations.

Clone the repository on GitHub and follow the instructions to get started.

13. Augury

When building web applications, browser DevTools play an important part in the development process. It provides features for debugging, diagnosing and editing web applications. When dealing with Angular applications, DevTools only lets you interact with the end product of your code, which means your Angular components, directives, etc. have been converted to JavaScript, HTML and CSS.

Augury as a browser extension allows you debug and visualize your Angular application in its pre-compiled state. With Augury, you can inspect your components and ensure they’re functioning as they should. Augury works better with source maps, so ensure that you generate source maps for a better experience while using Augury.

You can download the extension for Chrome or Firefox. Visit their GitHub page if you wish to contribute or raise issues.

14. ngx-moment

Moment.js is a utility library for manipulating time (not what you think). It provides a set of functions for parsing, formatting, validating, etc. dates and time using JavaScript. ngx-moment builds on the Moment.js library, providing Angular pipes for use within components. It comes packed with pipes for the functions provided by Moment.js, thus effectively eliminating the overhead of importing the functions into every component for use.

The library is actively maintained and is relatively easy to get started with. Visit the GitHub page and run through the documentation to get started.

15. ngx pipes

Fun times when Angular.js came packed with a set of pipes for transforming data before rendering. Filters is what they were called in Angular.js. Well, for some performance reasons, more recent Angular versions don't include pipes for filtering or ordering lists. Angular pipes is a library that contains a set of useful pipes for use in your Angular project. It contains pipes for performing actions like: trimming, reversing, matching and scanning strings, plucking, shuffling and ordering Arrays.

It is well documented and easy to integrate. Getting started should be a breeze and, soon enough, you’ll start getting more done with pipes. Visit the documentation or their GitHub page to get started.

16. Angular Epic Spinners

When dealing with interactivity on a webpage, you have to think about notifying users when processes not visible to them are ongoing. When the time comes, you are required to display a loading indicator. Some sites have custom loading indicators for their application, but if you’d rather have a set of easily available spinners, then this spinners library should be your go-to.

Angular Epic Spinners is built on the epic-spinners library, with Angular components for each component available in the library. Each component can be imported as an individual module and rendered anywhere within your application. You can select from any of 20 indicators available in the library. You can view the demo page or head straight to their GitHub page.

17. Apollo Angular

GraphQL is a query language for APIs and a runtime for fulfilling queries made with data. It allows developers to request for data they need in specific areas of their application. Apollo client is a library used to consume data from GraphQL endpoints. Apollo has different client libraries for consuming data on the frontend – libraries exist for React, Angular, Vue, etc.

Apollo Angular is a client library built for Angular applications to consume GraphQL endpoints. Apollo Angular is agnostic of any router used within the application. It also supports server-side rendering. The documentation page is well written with adequate examples to help you get started.


People sometimes avoid using external libraries in their applications during development. While that’s acceptable in some instances, external libraries can help reduce development time significantly. There are a lot of libraries that might have achieved whatever you’re struggling with during development. The task is finding the right library that fits into your applications and ensuring it fulfills its purpose. Happy coding.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Web Developer Bootcamp

Angular 8 is coming

MEAN Stack Angular 8 CRUD Web Application

Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

The Pros and Cons of Angular Development

The Pros and Cons of Angular Development

Angular is a part of the JavaScript ecosystem and one of the most popular software development instruments today. It was introduced by Google in 2009 and received warm commendation from the development community.

According to the 2019 StackOverflow survey, 30.7 percent of software engineers now apply AngularJS and the new version Angular 2+ to create user interfaces. Since the beginning of 2019, the Angular developer community has grown 50 percent compared to 2018.

So, let’s talk about the main features of these tools and explore their benefits and drawbacks in terms of front-end engineering.

What is Angular: The story behind AngularJS and Angular 2+

Angular, supported by Google, is an open-source software engineering platform used for building user interfaces (front-end). Its history traces back to 2009 when Misko Hevery and Adam Abrons, Google engineers, developed the framework currently known as AngularJS and officially released it in 2010.

AngularJS. In 2010, AngularJS’s main benefit was that it let you turn HTML-based documents into dynamic content. Before AngularJS, HTML, the web markup language, was always static, meaning that users couldn’t actively interact with interfaces on the HTML pages. There were some ways to build dynamic, single-page applications (SPAs) but they were too complex for convenient engineering. AngularJS architecture reduced development effort aimed at creating dynamic content and the users got web pages with dynamic forms and elements.

Angular 2+. In September 2016, Google released Angular 2. It was a complete rewrite of a framework by the same team, matching the increasingly modern requirements of the web. The difference between the old Angular and the second version was so radical, you couldn’t just update from one to another. Migrating the application to Angular 2 required too many modifications due to different syntax. So in the further updates, the Angular team developed migration techniques and tools to make the transition from AngularJS less painful.

Angular versions history: Angular 2-8

The Angular community is split between AngularJS and modern Angular. To avoid terminology confusion, we will simply be calling the new framework Angular, as some community members  suggest, as opposed to the old AngularJS 1.x version.

Angular framework in its modern form includes versions from 2 to the most recent one – Angular 8. The 8th update was released in May 2019, and version 9 is planned for October 2019. So, in this section, we will elaborate on the main improvements each version of Angular brought with its release:

Angular 2

The release of Angular 2 generated numerous changes to the initial framework, as it was rewritten in TypeScript and it supported mobile. The architectural style switched to component-based, and because of TypeScript, Angular 2 received a new in-built compiler. Other improvements like application size reduction and syntax changes made it impossible to simply upgrade from AngularJS to the new version.

Angular 4

Major improvements in the Angular router, which was already updated to the third version, led to the numeric skip of Angular 3. So, when Google released Angular 4, the router was also updated to the fourth version. With the fourth version, Angular CLI 1.0.0 was introduced as a core element of the Angular project. And with the release of Angular Universal, Angular applications now could be rendered outside the browser.

Angular 5-6

The release of the fifth and sixth versions concentrated on optimizing Angular CLI and compiler work. Angular CLI was improved with workspaces, which developers can use to host multiple Angular projects in different directories. A new upgrading tool to simplify migration from one version of Angular to another was also released as a part of version 5. Another important feature was the introduction of the web workers function and the overall enhancements of CLI.

Version 6 of Angular introduced Google’s Material Design SDK.

Angular 7

With Angular 7 CLI was enhanced with prompts. Prompts provided tips in CLI to explain functions and purposes of elements, so using CLI became more intuitive. Applications received various improvements in performance and size of the code-base. And CLI documentation has also been updated.

Angular 8: the latest version of Angular

In the latest update, Angular 8, two elements were introduced for the first time as experimental features:

Another major improvement is differential loading used to upload browser-specific bundles to support legacy browsers and upload content faster.

MEAN stack

Angular belongs to the so-called MEAN stack. The acronym describes four technologies that cover major software product development aspects.

M – MongoDB, NoSQL (non-relational) database

E – Express, back-end middleware

A – Angular, front-end framework

N – Node.js, runtime environment. (Learn more about Node.js pros and cons in our dedicated article.)

While engineers may be using Angular regardless of other technologies in the stack, they can always rely on an existing firm ecosystem that also has its full-stack developers, specialists covering all aspects of software development.

Angular tools and setup

Here we’ll talk about the main tools that engineers commonly use with Angular to get the full benefit of the framework.

RxJS. It’s not likely that you’ll be able to work with Angular without RxJS, a reactive programming library, aimed at handling asynchronous data with multiple events. It basically allows engineers to set up multiple channels of data exchange to ease resource consumption.

Angular CLI. Command-line interface (CLI) is used to create projects, add files, perform updates, deal with debugging testing, and deployment.

We’ll talk more about RxJS and Angular CLI below.

Code editors. Currently, many popular code editing products support Angular. The most common ones accepted by the community include Visual Studio CodeSublime text, and surprisingly not – Angular IDE, and WebStorm. However, check to determine if your favorite code editor fits Angular.

Pros and cons of AngularJS

Let’s briefly recap the main benefits that made original AngularJS shine among other front-end development frameworks as well as describe the main drawbacks of the tool.

Pros of AngularJS

⊕ Two-way data binding. AngularJS was built with Model-View-Controller architecture. And the framework synchronized the Model and the View. As the data in the Model changes, the View does too. Two-way data binding allowed engineers to reduce development time as it didn’t require writing additional code to provide continual View and Model synchronization.

⊕ Directives. This feature actually enabled the HTML extension mentioned above. Directives allowed developers to assign special behaviors to the Document Object Model (DOM), permitting engineers to create dynamic and rich content with HTML.

⊕ Dependency injection. Dependencies define how different pieces of code interact with each other and how the changes in one component impact the other ones. Usually, dependencies are directly defined in the components themselves. So that every change in dependency requires changing components as well. With AngularJS, you could use injectors that defined dependencies as external elements decoupling components from their dependencies. Dependency injection made components more reusable, easier to manage and test.

⊕ Community. Right from the beginning, AngularJS became extremely popular among engineers. A strong community provided enough training materials, discussions, and third-party tools to embark on using AngularJS as well as find a solution to nearly every arising issue.

Cons of AngularJS

Θ Performance. Dynamic applications didn’t always perform that well. Complex SPAs could be laggy and inconvenient to use due to their size.

Θ Steep learning curve. As AngularJS is a versatile instrument, there is always more than one way to complete any task. This has produced some confusion among engineers. However, the abundance of tutorials and issue discussions allowed for resolving most of the problems.

After the release of Angular 2 and then the Angular 4 update, the use of the original AngularJS 1.x slowly started to decline. While the new versions still have the same features, described in the benefits section, they were completely rebuilt in the new versions.

Angular 2 and Angular 2+

The main problem with Angular is that it came to the new world dominated by the impact of its leading competitor ReactJS (check our React vs Angular comparison). And the debate on whether you should use Google’s framework or the one from Facebook is quite intense. As we’ve covered the original AngularJS 1.x comparing it with other JavaScript frameworks, let’s have a look at the main advantages and disadvantages of the new Angular environment. Although we won’t be directly comparing Angular with its ReactJS competitor, this rivalry should be kept in mind when choosing the best-fit instrument for your next project.

Pros of Angular

Let’s have a look at the main benefits that the technology suggests to the engineering community, including the component-based architecture, mobile-oriented philosophy, performance, and some other characteristics that make Angular stand out.

⊕ Component-based architecture that provides a higher quality of code

The component-based architecture is one of the things that makes the difference between AngularJS and its successor. Components can be thought of as small pieces of user interface, like a section of the application. While each component is encapsulated with its functionality, there is a strict hierarchy of components in Angular.

The component tree is shown over UI elements of an app

In Angular, each UI element on the screen can be a component. In the given example, components are the sections of an eCommerce app: The application itself is a parent component hosting menu list and shopping cart. Correspondingly, the menu list has its child components, and each menu item hosts an item description component as well. That’s what is called component hierarchy.

While AngularJS was built mainly around the Model-View-Controller (MVC) architecture, starting from version 2 Angular is considered component-based, which is very similar to MVC but ensures higher reusability of components across the app. This allows for building UIs with many moving parts and, at the same time, streamlines the development course for engineers. What are the main benefits of such an architecture?

Reusability. Components of similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope applications where different systems converge but may have many similar elements like search boxes, date pickers, sorting lists, etc.

Readability. Encapsulation also ensures that new developers – who’ve been recently onboarded to a project – can read code better and eventually reach their plateau of productivity faster.

Unit-test friendly. The independent nature of components simplifies unit tests, quality assurance procedures aimed at verifying the performance of the smallest parts of the application, units.

Maintainability. Components that are easily decoupled from each other can be easily replaced with better implementations. Basically, your engineering team will be more efficient in maintaining and updating the code within the iterative development workflow.

⊕ TypeScript: better tooling, cleaner code, and higher scalability

Angular is written using TypeScript language, which is basically a superset for JavaScript. It fully compiles to JavaScript, but helps spot and eliminate common mistakes when actually typing the code. While small JavaScript projects don’t require such an enhancement, the enterprise-scale applications challenge developers to make their code cleaner and verify its quality more often.

Putting the TypeScript-first policy of Angular into the benefits section is an arguable point for many engineers. TypeScript-related complaints appear every now and then among the development community. Engineers have to learn yet another language. However, TypeScript is there for a reason and you still can use JavaScript if you want to.

Victor Savkin, a former developer from the Google Angular team, explains that the shift from JavaScript to TypeScript is justified by the tooling for large enterprise-scale projects. TypeScript has better navigation, autocompletion, and refactoring services.

Currently, TypeScript is considered the base language for Angular and the documentation is also created for TypeScript. Angular 8 requires TypeScript version 3.4, which was released in March 2019. You can read the list of changes in the Microsoft blog. In short, TypeScript 3.4. offers type inferring, reduced build time, and some syntax changes.

⊕RxJS: efficient, asynchronous programming

As we mentioned, RxJS is a library commonly used with Angular to handle asynchronous data calls. Thinkster suggests viewing RxJS for JavaScript code as you would Henry Ford’s assembly line to car manufacturing. It allows for handling events independently in parallel and continuing execution without waiting for some event to happen and leaving a web page unresponsive. In principle, this works like the assembly line, where execution is broken down to individual and interchangeable pieces, rather than being tied to a single person. Obviously, asynchronous programming existed before RxJS, but this library has made many things easier.

While many engineers complain about the RxJS learning curve – and it’s unarguably a steep one – as soon as you master the tool, it shines in multiple ways. The library operates with Observables, sort of blueprints that describe how data streams are combined and how the application reacts to variables in these streams. Basically, once you’ve got a grip on observables, you can easily reuse, manage, and combine them as Lego blocks, reducing the complexity of such programming operations as building drag-and-drop features, handling large volumes of data in chunks, etc. You can leverage RxJS with other frameworks that function with front-end (React.JS) or back-end operations (Node.JS), but in Angular RxJS is a necessity, which we’ll also discuss in the cons section.

⊕ The platform-agnostic philosophy

Angular was developed with the mobile-first approach in mind. The idea is to share the codebase and ultimately the engineering skillset across the web, iOS, and Android applications.

To make this ambitious positioning happen, in 2015 Angular developers cooperated with the team behind the NativeScript framework (which focuses on building close to native mobile apps). Not only the code itself, but Angular concepts such as dependency injection, data binding, services, and routing are similar both for NativeScript and Angular.

However, this agnosticism doesn’t stretch to code reuse itself, but rather to the same engineering skillset. In other words, your developers should use NativeScript UI components to build mobile interfaces but they will be operating in familiar JavaScript and Angular environments and the learning curve to tackle mobile won’t be that steep.

Image source:

⊕ High Performance

Multiple factors can help in making your application faster. The main boost is ensured by hierarchical dependency injection and Angular Universal support.

Hierarchical dependency injection. Angular uses improved hierarchical dependency injection compared to AngularJS. The technique decouples actual components from their dependencies by running them parallel to each other. Angular builds a separate tree of dependency injectors that can be altered without reconfiguring the components. So, classes don’t have dependencies in themselves but consume them from the external source.

Every component tree has an assigned tree of injectors that contain dependencies information

The approach provides high-performance scores for Angular applications. As the Angular team claims, Angular 2 was 5 times as fast as Angular 1.x, and – as engineers claim – the later versions have even increased the performance mark.

Angular Universal. Angular Universal is a service that allows for rendering applications view on a server instead of client browsers. Google provides a set of tools to either pre-render your application or re-render it for each request by a user. Currently, the toolset is tailored to Node.JS server-side frameworks and supports ASP.NET Core. Google claims that they are going to add support for PHP, Python, and Java.

Ivy renderer. Angular components and templates are written in TypeScript and HTML, but the actual HTML is not used directly in the browser. It takes an additional step when HTML and TypeScript are interpreted into JavaScript instructions. A renderer is an engine that translates templates and components into JavaScript and HTML that browsers can understand and display. Ivy is the third iteration of the Angular renderer after the original compiler and renderer2.

In Angular 8, Ivy renderer was introduced officially, so now it’s possible to switch to Ivy as an experimental feature. It’s promised to be a default renderer in Angular 9, but for now Ivy is not recommended to use as a basic tool.

One of the interesting features of Ivy is tree-shaking. It refers to the component tree on the rendering stage, meaning that it removes unused chunks of code, making the applications smaller and faster to load. It’s backward compatible: After the Angular update, your existing applications will be rendered with Ivy without additional hassle.

Differential load was added in Angular 8 as another optimization technique. Differential loading is a way to load content and optimize bundle size. What it actually does, is allow you to create two different bundles for legacy browsers and new ones. Angular would use recent syntax and polyfills for the newer browsers, while creating a separate bundle with stable syntax for legacy browsers. That way, differential loading reduces bundle size and loading speed for corresponding browsers, improving the overall performance.

But we recommend taking any performance claims with a grain of salt. Not only does the underlying architecture contribute to that, but also the quality of code that your engineers produce.

⊕ Google Long-Term Support

Some software engineers consider the mere fact that Angular is supported by Google a major advantage of the technology. While this may sound justified, Google itself is not enough. The good sign though is that Google announced Long-Term Support (LTS) for the technology. Igor Minar and Steven Fluin, the engineers behind Angular, confirmed this commitment in the NG-Conf 2017 Keynote.

What this basically means is that Google plans to stick with the Angular ecosystem and further develop it, trying to hold the lead positions among front-end engineering tools.

⊕ Angular Material streamlines Material Design interface engineering

If you’re into the Google ecosystem or you just think that Material Design is a cool set of design guidelines, you’ll be happy to know that the Angular team has been updating their framework with material design components. The great thing about material design is that it’s a consistent and deeply justified system that considers how people interact with digital products and strives to make their experience seamless and aesthetically pleasing. If you’ve been using Google Drive, Google Cloud, or Android, most likely you’re familiar with it.

With Angular Material you get prebuilt components the variety of which span across form controls, navigation elements, layouts, buttons and indicators, popups, modal windows, and data tables. They are adjusted to Angular use and easy to integrate into a project.

⊕ Seamless updates using Angular CLI

Angular command-line interface is favored by many engineers for various reasons. It’s easy to set up, newcomer-friendly, comes with testing tooling out of the box, simple commands, and more.

One of the impressive features of version 6 is the NG update  command. It checks the package and makes recommendations for updates possibly required for all dependencies, including loaders and plugins. Some code updates that involve 3rd-party dependencies can be updated automatically by the… 3rd party if – for instance – they decided to fix something in their products. You may check how this works on the Angular Update Guide page.

The same applies to Angular itself. Considering that the team has an impressive rhythm with new versions coming in about six months, there must be a simple way to update Angular itself without breaking anything. Ng update @angular/core will refresh your framework packages, TypeScript, and RxJS. In a more recent Angular 8, unified location service was added to improve migration from AngularJS to its latest version.

⊕Powerful ecosystem

As Angular has been around for donkey’s years, it’s been snowed under by packages, plugins, add-ons, and development tools. You can explore a part of the community handiwork by looking at the list of Angular Resources. These include IDEs, tooling, UI environments, Angular Universal for server-side rendering that we mentioned above, analytics tools, facilities for ASP .NET, data libraries, etc.

If the average engineer gets lost, there’s always a tool to help solve a problem that pops up.

⊕Angular elements

If you have multiple projects running some of which aren’t Angular, with the 6th update you can use Angular Elements in other engineering environments. These may be the apps built with VueJS, React, or even jQuery. You can reuse your Angular component by wrapping it as a DOM element (Custom Element). It’s really convenient if you or your team have to switch between various environments.

⊕Angular directives

Directives were introduced in AngularJS, but they changed with the migration to the component-based architecture in further Angular updates. Directives can be used to extend HTML capabilities and add/remove elements from the DOM tree.

There are three types of directives in Angular: component, attribute, and structural directives. Components represent a directive with an HTML template, while two other types are very popular to efficiently modify DOM trees.

Cons of Angular

If you’ve been following the hype and discussion around Angular 2-6 releases, you may know that the technology generates much criticism around it. Let’s examine the main drawbacks to also be considered.

Θ Divided and churning community

Regardless of the LTS claims, the community around any technology is what makes it powerful in the market. And the Angular community story is quite controversial. According to the 2018 StackOverflow Developer Survey, Angular (both Angular 1.x and Angular) was the second most commonly used technology in the category Frameworks, Libraries, and Other Technologies, which is cool. The same survey of 2019 shows an Angular/AngularJS drop to the ninth position among the most used frameworks with 53 percent of respondents.

The community is likely to churn: If we look at the page listing the most dreaded frameworks, Angular occupies the fourth position with 42.4 percent. Its main rival React.js occupies first place among the most loved and most wanted web frameworks, followed by Vue.js.


This is mostly since AngularJS 1.x users are likely to churn and don’t consider transitioning to modern Angular. As you remember, you can’t directly update from the AngularJS 1.x to the recent versions of it.

Θ Migrating legacy systems from AngularJS to Angular requires time

As we said, there’s a monumental difference between AngularJS and Angular, and so is the path of migration from the past to the future. Check this migration recommendations page. Unlike updating from, say, Angular 5 to Angular 6, it won’t be a breeze, especially if you’re dealing with a legacy monstrosity.

There are different ways to do that, one of which is to use a hybrid approach. It entails having both old and new Angular operating at the same time while you incrementally update the whole product. Not only does it take time, you’ll have to review many tools, transition to a new language, and deal with a heavier app as you have both Angulars running.

Another technique that can be applied during the migration is called lazy loading. Lazy loading is an optimization technique, which basically means loading only those parts of the app (or its content) that were invoked by the user. When the component or function is required, Angular would leverage the part of the app and render it. With lazy loading, parts of the AngularJS app can be invoked and rendered within the Angular application.

Θ Angular is verbose and complex

The most frequent complaint that you hear from the Angular development community is the verbosity of the instrument. This problem hasn’t changed since AngularJS.

Although we’ve mentioned the component-based architecture as the major Angular benefit, the way components are managed is too complicated. For instance, you may need up to five files for a single component in Angular, have to inject dependencies, and declare the component lifecycle interfaces. Other points of concern are Angular-specific 3rd party libraries and its syntax. Consequently, much of the development time in Angular is spent doing repetitive things.

Θ Steep learning curve

If you onboard new developers familiar with JavaScript to learn and use new Angular, they will be challenged compared to similar React or Vue onboarding. The array of topics and aspects to be covered is large: modules, dependency injection that we mentioned before, components, services, templates, etc.

Another barrier is RxJS, a reactive programming library for asynchronous programming. Learning it, at least on the basic level, is mandatory for using Angular. Engineers complain about error messages that are too cryptic to grasp without additional research followed by trial-and-error manipulations.

TypeScript, as we’ve already mentioned in the benefits section, is also a bone of contention. While TypeScript improves the maintainability of code, having to learn it doesn’t make the curve gentler.

Θ CLI documentation is lacking details

Some engineers express concerns with the current state of CLI documentation. While the command line is very useful and loved by Angular developers, you aren’t going to find enough info in their official documentation on GitHub and you’ll spend some time exploring threads on GitHub to get answers.

However, with the Angular 7 update, CLI documentation was slightly refreshed with referral links and guideline details.

Angular is created for enterprise-scale applications

Claiming that new Angular is controversial would be too euphemistic. If you were to read different feedback posts from the development community, it’s likely that you’d stumble over complaints rather than excitement. But we aren’t that pessimistic about Angular.

The use of TypeScript for increasing the maintainability of code, the performance score that improves as you make more complex applications, and specific ecosystem choices hint that Angular is likely to become the main instrument for long-term and heavy-investment projects where a steep learning curve is compensated for by stability and ongoing tech support.

And this is the major difference between the new Angular and ReactJS that you may also consider. The latter is easy to grasp, deploy, and start working with, but it’s definitely less versatile and maintainable than Angular.

***Thanks For Visiting. ***

Further reading

To become an effective Angular developer, you need to learn 19 things in this article

To become an Outstanding AngularJs Developer - part 1

To become an Outstanding AngularJs Developer - part 2

☞ Best 50 Angular Interview Questions for Frontend Developers in 2019