{"id":4949,"date":"2017-08-21T18:53:47","date_gmt":"2017-08-21T13:23:47","guid":{"rendered":"https:\/\/www.konstantinfo.com\/blog\/?p=4949"},"modified":"2018-06-19T18:14:34","modified_gmt":"2018-06-19T12:44:34","slug":"top-features-of-google-angular-4","status":"publish","type":"post","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/top-features-of-google-angular-4\/","title":{"rendered":"Top Features of Google Angular 4"},"content":{"rendered":"

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 \u2018more than half\u2019 in some cases.<\/p>\n

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.
\nSo, what are the top features of Google Angular 4.0.0?<\/p>\n

1. If\u2026Else Template Conditions<\/h2>\n

The Angular Version 2.x used to offer a *nglf template that was being used to make decisions based on expressions like:<\/p>\n

<p *nglf=\u201disAuth\u201d>You are logged in as auth.username<\/p><\/em><\/p><\/blockquote>\n

The problem was what if the user wasn\u2019t 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 \u2018else\u2019 syntax.<\/p>\n

Syntax:<\/strong><\/p>\n

<element *nglf=\u201d[condition expression]; else [lse template]\u201d><\/em><\/p>\n

<\/element\/><\/em><\/p><\/blockquote>\n

A real example:<\/strong><\/p>\n

export class AppComponent implements OnInit{
\nauth: Observable<{}>;<\/em><\/p>\n

ngOnInit() {
\nthis.shown = true;
\nthis.auth = Observable
\n.of({username: ‘chris’, password: ‘me@chris.me’})
\n.delay(new Date(Date.now() + 4000));
\n}
\n}<\/em><\/p><\/blockquote>\n

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\u2019 period gains ground.<\/p>\n

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

2. Animation Movie<\/h2>\n

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 \u2018auto completion\u2019 feature. Further, the syntax for template binding will now allow the developers to use if\/else style syntax while uploading local variables alongside observables.<\/p>\n

If you would like to import animation bundles, it should be done from @angular\/animations:<\/p>\n

import {Component, OnInit} from ‘@angular\/core’;<\/em><\/p>\n

import {
\nanimate,
\nstate,
\nstyle,
\ntransition,
\ntrigger} from ‘@angular\/animations’<\/em><\/p><\/blockquote>\n

This certainly has been one of the best improvements and a top feature of Google Angular 4.<\/p>\n

3. Typescript\u2019s StrictNullChecks<\/h2>\n

Previously, \u2018undefined\u2019 and \u2018null\u2019 were the first-class citizens of JavaScript. Developers weren\u2019t able to define variables to tell the typescript that the values can be \u2018undefined\u2019 or \u2018null\u2019. With Angular 4.0.0 you are now explicitly allowed to have any of these:<\/p>\n

let x = String | null
\nlet y = Number | undefined
\nlet z = Array | null | undefined<\/em><\/p><\/blockquote>\n

In the above example,<\/p>\n