Top Features of Google Angular 4

The Angular 4.0.0 is in the news currently and it has created a widespread excitement in the developer community. Released on 23rd of Mach 2017, the latest update makes Angular a smaller, faster and much more convenient, especially for developers who are working with small applications. According to Google Developer Advocate for Angular, Stephen Fluin, there have been changes under the hood to replicate what an AOT (ahead of time) generated code should look like. The latest changes to Angular are aimed at minimizing the length of codes, trimming them by ‘more than half’ in some cases.

Google Metrics suggests that the codes being generated by Angular JS were 10 times the length of the original template. With Angular 4.0.0 in place, it has been cut short to 3 times of the original. A production bundle with Angular 4 will thus be reduced by hundreds of kilobytes. The version 4.0.0 uses Microsoft Typescript 2.1 and the newer version further attaches type checking and a faster speed for NGC, the traditional compiler for templates.
So, what are the top features of Google Angular 4.0.0?

1. If…Else Template Conditions

The Angular Version 2.x used to offer a *nglf template that was being used to make decisions based on expressions like:

<p *nglf=”isAuth”>You are logged in as auth.username</p>

The problem was what if the user wasn’t logged in or has been waiting for the user login request to be completed before coming up with a message? Angular 4.0.0 handles such cases with the ‘else’ syntax.

Syntax:

<element *nglf=”[condition expression]; else [lse template]”>

</element/>

A real example:

export class AppComponent implements OnInit{
auth: Observable<{}>;

ngOnInit() {
this.shown = true;
this.auth = Observable
.of({username: ‘chris’, password: ‘[email protected]’})
.delay(new Date(Date.now() + 4000));
}
}

For those trying to simulate an HTTP async request, the process will take just about 4 seconds now. Consequently, the else syntax helps display a message of loading as the 4 seconds’ period gains ground.

<ng-template #fetching>
  <p>Fetching…</p>
</ng-template>
<p *ngIf=”auth | async; else fetching; let user”>
  {{user.username }}
</p>

2. Animation Movie

With version 4.0.0, the animations are derived from @angular/core and included in the package. If you are not going to use animations, no unnecessary code will clutter the final lines of script. Developers now will be able to find the documentation and also take the advantage of the ‘auto completion’ feature. Further, the syntax for template binding will now allow the developers to use if/else style syntax while uploading local variables alongside observables.

If you would like to import animation bundles, it should be done from @angular/animations:

import {Component, OnInit} from ‘@angular/core’;

import {
animate,
state,
style,
transition,
trigger} from ‘@angular/animations’

This certainly has been one of the best improvements and a top feature of Google Angular 4.

3. Typescript’s StrictNullChecks

Previously, ‘undefined’ and ‘null’ were the first-class citizens of JavaScript. Developers weren’t able to define variables to tell the typescript that the values can be ‘undefined’ or ‘null’. With Angular 4.0.0 you are now explicitly allowed to have any of these:

let x = String | null
let y = Number | undefined
let z = Array | null | undefined

In the above example,

• ‘x’ can be assigned both a null or string value
• ‘y’ can be assigned either an undefined or a number
• ‘z’ can be assigned both string and array types, hence it can be both undefined or null

A mobile app development company can do great stuffs using this!

4. Angular Universal

Server side rendering has always been crucial for any mobile app development company. It is the popular process to split HTML into virtual DOM to allow browsers render them as needed. It consequently allows for the web robots and spiders to dig into the content and website whenever necessary. However, this was not the case with all those single page apps of the past. They used virtual DOM concepts that abstracted rendering. Angular 4.0.0 comes up with a solution that is being called the Angular Universal. While the same used to maintain outside the Angular module, version 4.0.0 and on, it becomes a core part of the module. Now, all it takes is this:

import { platformServer, renderModuleFactory } from ‘@angular/platform-server’

5. FESM

The Flattened ECMAScript Module (FESM) marks the most significant and top feature of Google Angular 4. While mobile app development companies will barely notice it, the Angular 4.0.0 will now ship FESM format. This is aimed at reducing the size of code bundles while speeding up the build, loading and transpilation in browsers. The FESM will have a great impact on the performance of Angular scripts hereon. Initial tests already suggest a faster running NG server!

Many have wondered why Angular 2.x jumped to v.4.0.0 and skipped 3.0. Google provides a good reason for the same. The version numbers for all Angular JS components needed to be unified and we have already had the Angular Router being upgraded to v3. The right choice was consequently a version 4.0.0, as a way of unification. We however have the CLI command tool being released as v1.0.0. This is supposed to help project planning, test execution and abstraction of build.

Today, Angular JS is ranked as the second most popular framework after Node.js. We already have several upcoming releases slated for October (v 5.0.0) and another, a year from now (v6.00).

However, there are a few things that a mobile app development company must watch out for:

• An upgrade to Angular 4.0.0 will automatically put some of the dependant modules out of sync. Mobile app development companies will consequently have to process separate updates for these too.
• The plugins and code editors that rely on Angular template syntax would notify error syntax when you use ‘else’. However, the code still will work and we hope that the plugin managers will soon take care of the message.

The Angular 4.0.0 is definitely a shinier version. Mobile app development companies can also help by filling other issue they come across in the community to set up the usage for all. If you want to know about other bug fixes and features, head on to the Angular changelog.