Category Archives: Angular


Top Mistakes Developers Do While Coding with Angular

Top Mistakes Developers Do While Coding with Angular

AngularJS is one of the most popular JavaScript frameworks accessible today. AngularJS major goal is to bridge the development process which makes it great for prototyping small applications, but its power allows scaling to full-featured client-side applications. The combination affluence of development, breadth of features, and performance has led to wide implementation, and wide implementation comes with many common drawbacks. This list captures common AngularJS mistakes, so explore this article and know the major mistakes done by developers while coding with Angular.


In Angular 1, if the user wanted to be notified when a value changed, the user has to set a $scope.$watch and physically check for changes in each digest cycle. In Angular 2, the ngOnChanges links greatly and streamlines this process. Once the user defines a ngOnChanges method in his/her component class, it will be called whenever the component’s inputs change.

But, the ngOnChanges method executes only when the component’s inputs change -especially, those items the user have included in his/her inputs array or explicitly labeled with an @Input decorator. It will not be called when items are added or removed from @ViewChildren or @ContentChildren query lists.

If the user wants to be alerted for changes in a query list, then the user should not use ngOnChanges. In its place, the user should subscribe to the query list’s built-in observable, it “changes” property. As long as the user do so in the proper lifecycle link, the user will be alerted whenever an item is added or removed.

@Component({ selector: ‘my-list’ })
export class MyList implements AfterContentInit {
@ContentChildren(ListItem) items: QueryList;

ngAfterContentInit() {
this.items.changes.subscribe(() => {
// will be called every time an item is added/removed

There are very few circumstances where manipulating the DOM directly is necessary. Angular 2 provides a set of leading, high-level APIs such as queries that one can use instead. Leveraging these APIs confers distinct advantages:

  • It is possible to unit test the application without touching the DOM, which removes difficulty from testing and helps the user tests run faster.
  • It decouples the user’s code from the browser, allowing the user to run the application in any rendering context, such as web workers or outside of the browser completely.

When the user manipulates the DOM manually, the user will miss out the above advantages and ultimately end up writing less expressive code.


While playing around with queries, it is easy to fall into this ploy.
export class MyComp {
@ViewChild(SomeDir) someDir: SomeDir;
constructor() {
console.log(this.someDir);    // undefined

When the console logs are “undefined”, the developer might assume the query is not working or the developer itself constructed it imperfectly. It is important to remember that query results are not yet available when the constructor executes.


In Angular 1, if the user wants to adjust the visibility of an element, the user can use one of the Angular’s built-in directives, such as ng-show or ng-hide

Angular 1 example:

<div ng-show=”showGreeting”>

Hello, there!


In Angular 2, template syntax makes it available to bind to any native property of an element. This is very powerful and opens up a number of possibilities. One option to bind to the native hidden property, which is similar to ng-show, and sets the display to “none”.

Angular 2 [hidden] example:

<div [hidden]=”!showGreeting”>

Hello, there!


At first sight, binding to the hidden property seems like the closest cousin to Angular 1 ng-show. However, there is one “!important” difference.

ng-show & ng-hide together handles visibility by adjusting “ng-hide” CSS class on the element, which sets the show property to “none” when applied. Importantly, Angular controls this style and postscripts it with “!important” to assure that it always overrides any other display styles set on that element.


AngularJS is a great framework that continues to grow with the community. AngularJS is still a growing concept, but hopefully by following these pacts some of the major pitfalls of scaling an AngularJS can be averted.


Angular 2 Vs Angular 4

The year 2015-2017 saw a host of new frameworks from the house of JavaScript. Though several of their offerings were unsuccessful to make a resounding impact, Angular and React survived the test of time to become the go to frameworks for successful Angular development. With several frameworks have made headway in the world of application development, Angular has found a special place as one of the best open-source JavaScript frameworks.

This article focusses on the basic comparison between Angular2 and Angular4 and whether or not it is good enough to make a switch. First, let us explore in detail the various features and highlights of Angular2 to be able to make a practical comparison with its successor.


The Angular version two was primarily aimed at the development of mobile applications allowing developers to create a cross platform environment for their applications. The key highlight of Angular 2 was the removal of various supplementary modules from Angular’s core which simplified the process thus improving the performance. The supplementary modules have now found their way to Angular’s ever-growing library of modules where the users can effectively choose and select the components they want while leaving out the redundant components.

Angular 2 was specifically aimed at ES6 and “evergreen” modern browsers. The advantageous point of these browsers is that these automatically update to the most recent version. While developing for these browsers, Angular 2 provides various hacks and workarounds that allow the developers greater freedom build their code. Angular 2 eliminates several limitations that existed previously.


Angular 2 was developed on AtScript, which is a superset of ES6. Traceur compiler combined with ES6 was employed to process Angular that enables it to generate ES5 code. It utilizes TypeScript syntax to create runtime type assertions instead of compiling time tests. However, it is not compulsory to use AtScript to compose Angular apps. The user can alternatively use plain JavaScript or ES5 to attain effective results. Let us explore deeper into the various key features of Angular 2.


Dependency Injection was one of the important factors that set Angular apart from its primary competitors. Dependency Injection refers to a program design pattern where a specific program commendably gets hold of its dependencies instead of producing them. Dependency Injection is very helpful in cases of modular development and element isolation. Despite that DI has also faced several obstacles since the era of Angular 1.x. Angular 2 finally came with the answers to the problems along with some of the missing features such as child injectors and lifetime/scope control.


One of the major advantages of Atscript is that it supplies useful tools that can help functionally link metadata. This eases out the process of building the object instances by supplying the essential material into the DI library. The information entered will check for the relevant metadata when a function is called, or a class instance is created. A developer can also easily override the parameter information by hitting the “Inject” annotation.


A child injector has the privileges such that it inherits all the functionalities possessed by its parent injectors, but it also comes with a capacity to override them at the child level. This capability provided by Angular 2 gives the developer a free hand to call out and mechanically override several components under a variety of scopes as the situation would demand.


Even though Angular 2 was a significant improvement from its predecessors, Angular 4 takes it forward with some new features and improved capabilities.

Let us study one by one how Angular 4 has secured itself an edge over Angular 2 and how AngularJS development organizations can leverage it.


Angular 4 applications are smaller as they consume less space and run faster than its older versions. The team working behind Angular are constantly making developments on a regular basis to iron out the inconsequential technical glitches that may exist.


Angular 4 series have come up with several changes which also include several view engine twists to diminish the size of the generated code for various components by as much as 60 percent. This update version has claimed to reduce huge production bundles to mere kilobytes.


One of the main features that Angular boasts of are an improved template binding syntax. The improvement of the *ngIf and *ngFor comes after significant criticism for the lack of the “else” and “if-then-else” clause. Developers can employ an if/else design syntax, or introduce local variables such as “if” to unroll an observable.


Angular has come a long way since Angular 1.x to reach the version that prevails today. This evolution of Angular is expected to continue to bring in more revolutionary features to make the development team’s job easier. Even though Angular can be slight challenging to adapt at first, but those who are familiar with the functioning of Angular 2, will find it simpler to adopt Angular 4.


What is namespacing and why is it important?

Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace. Its Important for helping organized blocks of functionality in the application into easily manageable groups which can be uniquely identified.


Angular 4.2

The Angular team continues to publish new versions of Angular according to the Semantic versioning. Angular version 4 was released on March 16, six months’ later version 2 was released. In the last three months two minor versions and a lot of patch versions were born with new stuff. Angular 4.2 is already here and we have a huge number of new features added for making animations easier and powerful. Part of them are defining the reusable animations, querying for inner elements, animating when routes change and building/controlling an animation using AnimationBuilder. So, let’s dive deep-in and know about the new features in Angular 4.2.

Angular 4.2


  • Angular Forms now includes validators for min and max attributes.
  • Developer can now bootstrap a component directly by passing an element reference to the bootstrap method of an ApplicationRef.
  • Enhanced i18n tooling including MissingTranslationStrategy and location notes in xliff2 files.
  • New compiler flag alwaysCompileGeneratedCode is available in opt-in, and will be turned on by default in the future.


Two new validators joins the existing requirement, minLength, maxLength, email, and pattern. Min and Max helps the developer to validate whether the input is at least or at most the value specified or not.

<input type=”number” [(ngModel)]=”user.age” min=”0″ max=”130″>

Update (2017-06-17): The min and max validators have been temporarily removed from Angular in version 4.2.3, as they are a breaking change. They’ll return in a major version, maybe 5.0.0.

Angular Animations

There are huge number of new features to make working with Animations easier and more powerful. Some of the new feature are:

  • Configure options and set input variables within animations.
  • Define reusable animations using animation().
  • Stagger multiple elements within an animation using stagger().
  • Enable queried elements to trigger their own animations.
  • Orchestrate a full-blown animation when routes change.
  • Programmatically build/control an animation using AnimationBuilder

A new query function has been introduced in the animation DSL, allowing to query the elements in the template. It uses querySelectorAll behind the scene, so the developer can use an element or a class as parameter. It also supports pseudo-selectors, and that opens a few interesting possibilities!

For example, you can now easily animate elements in a NgFor:

<div [@races]=”races?.length”>

<button class=”btn btn-primary mb-2″ (click)=”toggle()”>Toggle</button>

<div *ngFor=”let race of races | slice:0:4″>






trigger(‘races’, [

transition(‘* => *’, [

query(‘:leave’, [

animate(1000, style({ opacity: 0 }))

], { optional: true }),

query(‘:enter’, [

style({ opacity: 0 }),

animate(1000, style({ opacity: 1 }))

], { optional: true })



Now, every time an element is removed from the races array, it will slowly fade out. And when an element enters, it will slowly fade’s in.

Animation has also been added to build reusable animations. The syntax allows to have dynamic parameters with default values. The developer need to use a reusable animation, they can call useAnimation, and override the default parameters if they want to.


That’s all for this release! The focus was mainly on animations and tests, and the team is also working on reducing the bundle size of the applications, with the help of the Google Closure Compiler. We think we are going to learn more about that very soon!


Angular 1 Vs Angular 2

AngularJS is a structural framework for dynamic web apps. It lets the user to use HTML as their template language and extends HTML’s syntax to express their application’s components clearly and concisely.

There are many conceptual and syntactical differences between Angular 1 and Angular 2. In this article, we are going to explain you the major differences between the above frameworks.

1) AngularJS 1 is easy to setup. All you need to do is to add a reference to the library and you are good to go. Whereas AngularJS 2 is dependent on other libraries and it requires some efforts to set up.

2) Angular 2 provides more choice for languages. The developer can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Whereas, Angular 1 supports only ES5, ES6, and Dart.

3) Angular does not have in-built with mobile support, whereas Angular 2 is mobile oriented.

4) In Angular 1 there is no usage of controllers and $scope, whereas in Angular 2 con-trollers has been replaced with components. Angular 2 is component based.


import { Component } from ‘angular2/core';


selector: ‘prodsdata’,

template: `

<h3>{{}}</h3> `


export class ProductComponent {

prods = { name: ‘Prod1′, quantity: 1 };


* Angular 1 consists of two ways to bootstrap angular. One is using ng-app attribute and other through code.


angular.element(document).ready(function() {

angular.bootstrap(document, [‘myApp’]);




Angular 2 doesn’t support ng-app. Say goodbye to ng-app. The only way to support angular is through code.

import { bootstrap } from ‘angular2/platform/browser';

import { ProductComponent } from ‘./product.component';


The bootstrap is a function; it takes starting component which is also a parent component of the angular application.

* The Structural directives syntax is changed. ng-repeat is replaced with *ngFor in Angular 2.



<li ng-repeat=”technology in technologies”>




<div *ngIf=”technologies.length”>

<h3>You have {{technologies.length}} technologies.</h3>


* In Angular .2 local variables are defined using a hash (#) prefix.

* In Angular 1, ng-model is used for two-way data binding, but in Angular 2 it is replaced with [(ngModel)].

* One of the major advantages of Angular is Dependency Injection. Angular 2 consists of DI but, there is a different way to inject dependencies. As everything is a class in Angular, so DI is achieved through a constructor.


Though the above two frameworks are similar, there are some essential differences in these two processes. Angular 2 is a really big step forward. And it certainly requires some efforts to migrate from Angular 1 to Angular 2. Both the tools have equal importance when compared with each other on the basis of functionality. The choice is always depends on the need and the requirements of the project.


How to convert angular js1.x filter to angular js 2.0 pipes?

Create pipe class
import { Pipe, PipeTransform } from ‘@angular/core';
@Pipe({name: ‘filter1′})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
return exponent; // do something with your vallue
After that in your component add and include pipe
import { Component } from ‘@angular/core';
import { ExponentialStrengthPipe } from ‘./exponential-strength.pipe';
selector: ‘power-booster’,
template: `

<h2>Power Booster</h2>

<p>Super power boost: {{2 | filter1}}</p>
pipes: [ExponentialStrengthPipe]
export class PowerBoosterComponent { }


Angular Material Design

Material Design is a language developed by Google. It aimed to make a persistent experience across all Google applications & platforms such as YouTube, Android, Google Play, Inbox, and Gmail. Google has announced Material Design at the 2014 Google I/O conference.

Angular Material Design

In this article we’re going to explore about Angular Material Design and its importance.


Angular Material is a UI component library for Angular JS developers. Angular Material components help the user in constructing attractive, steady, and functional web pages and web applications while complying with modern web design principles such as browser portability, device independence, and graceful degradation. It helps the user in creating faster and responsive websites and it is inspired from Google Material Design.


  • In-built responsive designing.
  • It also includes new versions of common user interface controls such as, buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
  • Standard CSS with basic essential footprint.
  • It enhances the specialized features like cards, toolbar, speed dial, side navigation, and swipe.
  • Cross-browser can be used to create reusable web components.


Angular Material has an in-built responsive designing so that, the website which is created using Angular Material will be recreated depending on the device size. The Angular classes are created in such a way that the website has to fit in any screen size. The websites which are created using Angular Material is fully compatible with PC, tablets, and mobile devices.


  • Angular Material is by design is very minimum and flat.
  • It is designed by considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
  • It supports bold colors.
  • The colors and shades remain constant across various platforms and devices.

Usage of Angular Material
There are two ways to use Angular Material, they are as follows:

  • Local Installation
  • CDN Based Version

Local Installation: A user can download the Angular Material libraries using npm, jspm, or a bower on a local machine and can include it in HTML code.

CDN Based Version: A user can include the angular-material.min.css and angular-material js files into their HTML code directly from the Content Delivery Network.

Local Installation:

  • Firstly, the user has to install Node.js.
  • Use the following command to install Angular material libraries
  • npm install angular-material
  • The Output will be as shown below
  • angular-animate@1.5.2 node_modules\angular-animate
  • angular-aria@1.5.2 node_modules\angular-aria
  • angular-messages@1.5.2 node_modules\angular-messages
  • angular@1.5.2 node_modules\angular
  • angular-material@1.0.6 node_modules\angular-material
  • npm will download the files in node_modular > angular-material folder.

CDN Based Version:

A user can include the angular-material.css and angular-material.js files into HTML code directly from the CDN.





What is YEOMAN – A quick summary:

Yeoman is an open-source client-side (MVC-MODEL VIEW CONTROLLER) platform to create Development Stack, which consists of tools and frameworks designed to help the developers to build high quality web applications. Yeoman runs as a command-line interface which is written in node.js. Yeoman provides a local development server and optimizes the production code for deployment.

YEOMAN Architecture:

Yeoman is a collection of three tools: YO, GRUNT, BOWER. These 3 tools provide everything for a developer to get started on a project.


Is a tool that generates essential assets for a project like style sheets, JavaScript, and views.


Is a task runner that will automate things like converting sass files to css, and optimising images. Grunt performs repetitive tasks like minifying, and compilation process of running an application instead of doing it manually.


To develop any application it needs basic requirements like widgets, Framework, assets, and Library files. Bower is a package Manager, It will find and download all required files for our application. Bower requires GIT.

Prerequisites for YEOMAN:

Node, npm, Git, compass (If application needs sass compilation). Compass in-turn requires Ruby and Ruby gems.

Getting started with YEOMAN:
1.Go to command prompt, and install Npm install -g grunt-cli bower yo generator-angular.
2. Create a folder in local drive, move to that folder in command prompt.
Execute the command yo angular <>
e.g. yo angular sampleApp
Now, Everything will be taken care of by, Yeoman generator.
Generator will create the following files and folders with default and basic configurations.
Application will be generated with app and bower components as illustrated bellow:

Starting Your Application:
The generated gruntfile has an inbuild task that will create a simple webserver so that we can preview our app.
We can start running the application by using this command.

Grunt serve
Once the server is started, grunt will automatically launch our application with default port 9000.

With Yeoman, below generators can also be created:
Backbone.js – generator-backbone
Ember.js – generator-ember
Jquery – generator-jquery
Wen-app- generator-webapp
These generators are installed through npm globally.
Npm install –g [generator-name]