Nataliya Muriy
Marketing Content Creator - you name it, she'll write it!
Posted on Jun 1st 2017

For all those who might have continued to resist its charms, Angular 4 is worth your while!  A wide range of companies have put their trust in it when it comes to their apps.  More and more developers are also excited about working with this IDE.  You might wonder why.

Simple!  For a business or an organization, customer satisfaction is priority, and Angular allows them to have an outstanding online experience due to the fact that it helps create Single Page Applications (SPAs) instead of just regular webpages.  Meanwhile, for those on the coding side, this version of Angular features five major improvements: if…else syntax in component HTML templates, stand alone animation module, TypeScript’s StrictNullChecks compliancy, Angular Universal adoption by team to live in core, and Performance boost with FESM (source).

First of all, the “If…else” conditionals are here to make a developer’s life easier when working with templates.  What was impossible with Angular 2, now can be done — specifying an Else statement after an If.  When you’ve already started a new Angular project, run the >ng serve command and opened up localhost:4200 in the browser, you can follow these steps, as outlined by Gary Simon:

First, open up /src/app/app.component.ts:

Next, open up the /src/app/app.component.html file in the same folder and write this code:

Operators can also be used by changing the *ngIf to:

And then to:


“If…then” can also be used.  For details, see this blog.  

Animation is part of Angular evolution: these functions are no longer part of the core library — instead they got their own.  This implies a need to use npm to install the animations package, as well as import the library within the app.module.ts file.  Yet, the benefits outweigh these extra few steps.  Angular 4 allows for the creation and activation of world-class animations, which can then be placed on any HTML elements and occur based on a variety of factors, such as user events or Angular lifecycles (source). 


To install Angular animations, do the following:

  1. To save the latest version of the angular animations library, as well save it as a dependency in the package.json file, in the project folder of your Angular app, at the console, type:
  2. In the /src/app/app.module.ts file, we add the import:
  3. In the imports array of the @NgModule decorator, we add:


To learn how to use get your component ready for animation, work with animation triggers, states and styles, transitions, how to attach an animation in the template, make it work in the component, add style during transitions, and add keyframe animations, check out Gary Simon’s blog.

Null checking has gone to a different level too, ever since TypeScript (TS) 2.0 was released.  Every type is now treated as a non-nullable — a great piece of news, since not paying attention to null can cause some trouble.  It was possible to incorporate null checks manually, but TS compiler provides null checking for you. 

For instance, one typical error is “Not assignable to parameter of type ‘never’”, which normally occurs because there is no more type widening. On the ariya.io website we find a sample code that would cause such a problem. We are asked to imagine a lunch box with two compartments to be filled with food of our choice (to include its name and calorie count.

Which results in something like:

The array lunchBox does not have any type information, so it is set to Never. As soon as you try to insert an item into the array, the type conflict occurs (Never vs Fruit).


To solve this issue all you need to do is include the appropriate type information. Something to this effect:


To see some other possible errors and solutions, take a look at this blog.

Angular 4 is also now in sync with Universal (the project that allows Angular to be run on a server).  To access most of the Universal code, go to @angular/platform-server.  More information on Universal use is available at github — check out the renderModuleFactory method in @angular/platform-server, or also from Rob Wormald in his Demo Repository.

Flattened ECMAScript Module (FESM) just got better too!  In accordance with the changelog (as quoted on the onlinecode.org website), “This format ought to facilitate tree-shaking, facilitate cut back the scale of your generated bundles, and speed up build, transpilation, and loading within the browser in sure situations.”  In other words, a huge difference in performance, talking about the build speed.

Angular 4 took a giant leap into the future.  To fully appreciate the differences between this version and the previous one, take a few moments to read this blog.  But here you can see that five areas in particular got a boost to facilitate a developer’s life and allow the end user to enjoy  a fantastic experience online.

Angular is also part of our CodeMix plugin and our MyEclipse IDE.