All You Need To Know About Angular 4

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. For most applications, Angular 4 has adopted Semantic Versioning and is backward compatible with Angular 2.

Improvements in Angular 4:

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

Animation Package: Animation packages allow users to find documentation and take advantage of autocompletion easily. Animations can be pulled from @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 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 of checking for your application. The Source maps for templates give a meaningful context for the original template when an error is detected.

Features:

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>

</ng-template>

ngIf with else:

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

<div *ngIf=”tests.length > 0; else empty” >

  <h4>Tests</h4>

</div>

<ng-template #empty>

   <h4> No test available</h4>

</ng-template>

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; `

</div>

Addition of Meta Service:

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

export class AppComponent {

constructor(metaService:Meta){

    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.

<p></p>

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

Addition of directive - compareWith:

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

View:
<select compareWith=”compareById”

        [(ngModel)]=”selectedUser”>
     <options *ngFor=”let user of users”   
       [ngValue]= “user.id”>   

     </options>
<select>

Component:

compareById(userFirst: User, userSecond: User) {

return userFirst.id === userSecond.id;

}

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,

platform-browser,platform-browser-dynamic,platform-server,router,

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

Conclusion:

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 provides additional directives and services.