Angular 4: Top New Features and Enhancements

Angular, one of the best open-source JavaScript frameworks for web application development, recently upgraded with new version Angular 4. Earlier release of Angular 2 version, was all in one a new Angular Framework, unlike AngularJS. For Angular 4 or Angular v4, the team decided to name it as “just Angular”, without affirming any version number with the name.

Just as, with every new Angular version framework, Google’s Angular team unboxed amazing updates and enhancements for AngularJS developers and AngularJS web development enterprise solution, likewise in Angular version 4 Google came up with multiple new features and invisible makeovers for faster performance and easy development.

What’s New

1.  Revamped *ngIf and *ngFor

Template Binding syntax supports else style syntax with if syntax and let developers to assign conditional rendering to local variable. Syntax for is used to store a sliced collection. Similarly as and async are added to template to simplify the syntax.

<div *ngIf="productList | async as products; else loading">
 <product-info *ngFor="let product of products; count as count; index as i" [product]="product"> Product {{i}} of {{count}}
 </ product-info >
</div>
<ng-template #loading>Loading...</ng-template>

2.  Router ParamMap

Router parameters were saved in a key value object structure until now, but with Angular 4 it is permissible to query a ParamMap in the router itself. It leads beneficial for security aspects with all types, as earlier key-value structure had an unsafe type (type Params = {[key : string]: any}).
ParamMap values are either string or an array of strings, depending upon method used.

Until now, route parameters were stored in a simple key-value object structure, so were accessible by using standard JavaScript syntax (parameterObjekt[‘parameter-name’] ).

class TestComponent {
 sessionId: Observable;
 
 constructor(private route: ActivatedRoute) {}
 
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

Now, the parameters are also available as a map, so it can be run by calling method (parameterMap.get(‘parameter-name’)).

class TestComponent {
 sessionId: Observable<string>;
 
 constructor(private route: ActivatedRoute) {}
 
 ngOnInit() {
 this.sessionId = this.route
 .queryParamMap
 .map(paramMap => paramMap.get('session_id') || 'None');
 }
}

3.  TypeScript Compatibility

Support to recent versions of TypeScript – 2.1 and 2.2 improved Type Security throughout application and speed rate of ngc-Compiler.

4.  Animations Package

In older version with @angular/core module, issue was functions were included in the part of code irrespective of animations is used or not. So, in Angular version 4, the function is added into its own package to avoid load on app. Beyond this, it also supports quick documentation search.

Animations can be added to main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations

5.  Dynamic Components

Dynamic components are built in a declarative way with new * ngComponentOutlet-Directive. Earlier with ComponentFactory it took lots of programming work to execute components dynamically at runtime. Angular is not simple as HTML code, it needs to focus on data binding and change detection too.

@Component({
 selector: ‘app-first-time-buyer’,
 template: ‘
<h1>Welcome to our Page!</h1>
 
’,
})
export class FirstTimeBuyerComponent {}
@Component({
 selector: ‘app-frequent-buyer’,
 template: ‘
<h1>Welcome Back!</h1>
 
’,
})
export class FrequentBuyerComponent {}
@Component({
 selector: ‘app-root',
 template: '
 
<h1>Hello Angular v4!</h1>
 
 <ng-container *ngcomponentoutlet="welcome"></ng-container>
 ',
})
export class App implements OnInit{
 welcome = FirstTimeBuyerComponent;
 
 ngOnInit() {
 if(!this.buyer.isfirstVisit){
 this.alert = FrequentBuyerComponent;
 }
 }
}

6.  Angular Universal

Render Angular applications directly with web server with Angular Universal. For Angular Universal, developers no longer need JavaScript to render content, so the websites are optimized faster on search engines.

Also, with Web Worker Threads content can be rendered outside the GUI thread even and can be simply added to the DOM Tree to display content later. Majority of the Angular 4 Universal code is now stored in @ angular/platform-server.

7.  Smaller and Quick

As Angular 4 web development code consume less space, it runs rapidly compared to AngularJS and Angular 2. The developer is continuously pursuing additional improvements to make it faster and smoother.

8.  View Engine – AOT Compilation

AOT – Ahead Of Time complication reduces about 60% size of generated code. So, with an increase in complexity of templates, more time is saved. It is heard that in Angular 4 adjustments are made under the hood such that it cuts down production bundles by hundreds of kilobytes.

It reduces the loading time of the page and at same time it boosts overall page speed with reduced size of code. It results in the noticeable improvement in performance.

9.  Flat ES Modules (Flat ESM / FESM)

No multiple small files per module, just one file is shipped per module inclusive of all necessary files for that module. As the files are of ‘flat’ versions, they provide better performance on execution and improve Tree Shaking and build. Flattened version ships rolled up version of code in ECMAScript Module format.

10.  Source Maps for Templates

Source maps are fundamental for debugging and finding errors. Right from source code to output it is connected, so it helps in cutting off the errors. Now, with Angular 4 source maps are not just with code but also for templates. Source maps for Templates created by new Template Compiler generate contextual information while debugging on browser and even in Crash reports and log messages.

Forthcoming Angular 5

Next milestone Angular 5 is expected to release in September, 2017. Angular 5 may come with Google-driven progressive web apps to cache apps in the browser. Furthermore, features may include a build optimizer to make app smaller by excluding irrelevant code and making Material Design components compatible with server-side rendering.