All You Need To Know About Angular 4

Sachin Warke
Posted by Sachin Warke on May 12, 2017

AngularJS is one of the most popular JavaScript frameworks for creating and managing Web applications. The latest upgrade to this framework was released by Google in March 2017, with major improvements and added functionality. Angular 4 has adopted Semantic Versioning and is backward compatible with Angular 2 for most applications.

Improvements in Angular 4:

View Engine: The new view engine helps to significantly reduce the size of the generated code for your components, in most cases by more than half! It now also detects any errors at build time instead of having to wait till runtime.

Animation Package: Animation packages allows users to easily find documentation and take advantage of autocompletion. Animations can be pulled out of @angular/core and into their own package. This means that the extra packages will not be a part of the production code. This helps in reducing application size and improving its efficiency. Users can add animations to the main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.

Angular Universal:  The universal project has been adopted by the Angular team, it allows developers to run Angular on a server. The universal code is now located in @angular/platform-server, and it also includes results of the internal and external work from the Universal team. The latest version of Angular 4 is compatible with typescript 2.1 and 2.2. It improves the speed of ngc and offers a better type checking for your application. The Source maps for templates gives a meaningful context in terms of the original template when an error is detected.


Template to ng-template:

In Angular 4 the <template> tag is deprecated and replaced by  <ng-template>.

<ng-template #empty>
  <h4> No test available</h4>

ngIf with else:

In Angular 4 developers can use ngIf with else in templates.

<div *ngIf=”tests.length > 0; else empty” >
<ng-template #empty>
  <h4> No test available</h4>

Addition of ‘as’ keyword:

It simplifies the let syntax, user can store the result in a variable of the template and use it in an element.

<div  *ngFor=”let user of users; index as i”>
  User &nbsp; `

Addition of Meta Service:

A new service is added to easily add/update meta tags.

export class AppComponent {
   metaService.addTag({name:'description', content:'Awesome happens here.'});

Addition of pipe - titlecase :

Using the titlecase keyword, users can change the first letter of a word into uppercase.

<!-- will display ‘Opcito Technologies’ -->

Addition of directive - compareWith:

This directive is added to help developers to compare options from selected element.

<select compareWith=”compareById”

     <options *ngFor=”let user of users”   
       [ngValue]= “”>   

compareById(userFirst: User, userSecond: User) {
return ===;

Addition of interface - ParamMap:

A new interface is added to represent the parameters of a URL. This interface offers methods like get() to get specific value  and getAll() to get all values.

const id = this.route.snapshot.paramMap.get(‘userId’);
params:string[] = this.route.snapshot.paramMap.getAll();

How to upgrade to Angular 4:

Upgrading to Angular 4 is very easy, it is the same as upgrading your Angular dependencies. The following commands are used when upgrading to Angular 4.

On Linux/Mac:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,
animations}@latest typescript@latest --save

On Windows:

npm install @angular/common@latest @angular/compiler@latest
@angular/compiler-cli@latest @angular/core@latest @angular/forms
@latest @angular/http@latest @angular/platform-browser@latest


Angular 4 offers major upgrades over the previous releases. It makes the Angular app smaller and faster by reducing the size of the production code and simplifies the development of Angular applications.  Furthermore, Angular 4 is backward compatible with Angular 2 and it also provides additional directives and services.

Topics: Product & Test engineering, JavaScript, angularJs

Leave Comment

Subscribe Email

    Post By Topic

    See all