[Angular] Quick Jump from AngularJS to Angular

Post title will be little confusing to Angular newbies. The first question will be what is the difference between AngularJS and Angular. AngularJS is the name of all 1.x versions of angular. The latest versions of angular are now termed as Angular i.e version greater than 1.x.

Filters — Pipes:

In AngularJS, to filter the output pipe symbol(|) is used. For example, userName will be filtered to upper case.

<p>The name is {{ userName | uppercase }}</p>
<tr ng-repeat=”movie in movieList | filter: {title:listFilter}”>
<tr ng-repeat=”movie in movieList | orderBy : ‘title’”>

In Angular, we will use the same pipe symbol(|) to filter the output however now it is called as the pipe. Most of the built in filter in AngularJS is available as built in the pipe as Angular.

<td>{{movie.price | currency:’USD’:true}}</td>

Due to the performance issue, filter and orderBy inbuilt filters are unavailable in Angular.

Local Variable — Input Variable:

AngularJS, use local variable. For Example:

<tr ng-repeat=”movie in vm.movies”>
<td>{{movie.title}}</td>
</tr> Angular, use explicitly declared Input variable with let keyword. For example:
<tr *ngFor=”let movie of movies”>
<td>{{movie.title}}</td>
</tr>

ng-class — ngclass:

In AngularJS, the ng-class directive is used to include or exclude CSS based on the expression.

<div ng-class=”{active: isActive}”>
<div ng-class=”{active: isActive, important: isImportant}”>

In Angular, ngclass directive works similarly and it is used to include or exclude the different CSS class based on the expression.

<div [ngClass]=”{‘active’: isActive}”>
<div [ngClass]=”{‘active’: isActive, ‘important’: isImportant}”>
<div [class.active]=”isActive”>

In both, the versions single class or multiple CSS classes can be used. Based on the expression, CSS classes are applied to the respective tags.

ng-hide/ng-show — hidden:

In AngularJS, the ng-hide & ng-show directive is used to hide & show the HTML element based on the expression.

<h3 ng-hide=”vm.favoriteHero”>

Your favorite hero is: {{vm.favoriteHero}}

<h3 ng-show=”vm.favoriteHero”>

Your favorite hero is: {{vm.favoriteHero}}

In Angular, There is no specific hide or show directive is available however hidden property is available and we can achieve above functionality with this property.

<h3 [hidden]=”favoriteHero”>
Your favorite hero is: {{favoriteHero}}
<h3 [hidden]=”!favoriteHero”>
Your favorite hero is: {{favoriteHero}}

ng-href — href

In AngularJS, the ng-href directive is available and it will preprocess the href property so it will replace the binding expression with the right URL so when will click appropriate URL will be rendered.

<a ng-href=”angularDocsUrl”>Angular Docs</a>

This directive is even used to route as part of navigation between the pages with in an application.

<a ng-href=”#movies”>Movies</a>

In Angular, There is no specific href directive available however href property is available to do the purpose.

<a [href]=”angularDocsUrl”>Angular Docs</a>

ng-if — *ngif:

In AngularJS, the ng-if directive is available and it will remove or recreates the HTML element from DOM based on the expression. If the result of the expression is false, then the element will be removed from the DOM.

<table ng-if=”movies.length”>

In Angular, the *ngif directive is available and it works the same as the ng-if directive in AngularJS. It creates and removes the portion of dom based on the expression output. if the expression returns false then some portion of dom will be removed and if it returns true then the portion of dom will be created.

<table *ngIf=”movies.length”>

ng-model — ngModel:

In AngularJS, the ng-model directive provides two-way binding such that any changes made in the view will be synchronized with the model and when there is a change in the model it will be automatically synchronized with the view.

<input ng-model=”vm.favoriteHero”/>

In Angular, Two-way binding is generally denoted by [()]. Descriptively it is called as ‘Banana in a box’.

<input [(ngModel)]=”favoriteHero” />

ng-repeat — ngFor

In AngularJS, the ng-repeat directive is available and it repeats the DOM element for each item.

<tr ng-repeat=”movie in vm.movies”>

In this examples, tr element repeats for each movie present in the collection of movies. In Angular, the *ngFor directive is present in the place of ng-repeat and it is similar to the ng-repeat in AngularJS.

<tr *ngFor=”let movie of movies”>

in the above example, movie is initialized as the local variable using the let keyword.

ng-src — src

It is almost similar to ng-href and href. In AngularJS, the ng-src directive will preprocess the URL and will bind the expression with appropriate URL.

<img ng-src=”{{movie.imageurl}}”>

In Angular, there is no src directive available however we have src property binding.

<img [src]=”movie.imageurl”>

ng-Style — ngStyle

It is almost similar to ng-class and class directive.

<div ng-style=”{color: colorPreference}”>

In Angular,

<div [ngStyle]=”{‘color’: colorPreference}”>

If you want to learn more about migration from AngularJS to Angular refer the angular documentation.

If you enjoyed this article, please share with your developer friends and click the green “❤” heart below and so others can find it too. Thanks for reading.

Originally published at www.nodesimplified.com.