Angular 5 Released

WRITTEN BY GARETH DUNNE @DUNNEDEV

As of 1st of November,  the latest version of Angular (Angular 5) has been released.
The release is named Pentagonal Donut and is the latest of Angular releases in its semantic versioning release schedule. The release details many additional features which I want to cover here.

Much to the dismay of some of the web dev community the semantic versioning of Angular is to continue with each release being marketed as a brand new version. I personally don’t have too much of a problem with it changing every 4 or 5 months but I completely see why the new iterations may confuse and annoy devs within the frontend community.

Similar to the way that I’m detailing Angular 5 in this post, this release provides an opportunity for those to remarket their courses and tutorials with the shiny new version of Angular.

I haven’t found any specific Angular 5 learning material but this might suffice until there are any updated learning resources.

While I’m sure plenty will cover the new features in great detail, I wouldn’t worry about feeling compelled to learn this completely new version of Angular because in reality these releases don’t tend to be groundbreaking and usually have minor breaking changes to previous versions.

Lets highlight some of the new features.

During the build time of your Angular applications you had to previously specify AOT (Ahead Of Time compilation) like so:

ng build --aot

This is now occurs by default so you now longer have to specify the ng build.

Performance of AOT has also been increased with faster rendering, less asynchronous requests and an overall reduction of download sizes. This added feature really aims to improve the speed of Angular bundling in development and production and is welcome improvement to AOT.

An interesting watch mode command has also been added.

ngc --watch

The idea of this command it to enable your application to only recompile when absolutely necessary. Therefore it will be much easier to use AOT in development mode rather than just production mode because previously, the whole application would recompile when a change was made making it only useful for production.

Some small changes having been made to the forms API. You can now specify to run validation on submitting a full form rather than it occurring on individual input fields.

We also now have the option to specify when to update a inputs fields value or validation state.

For more Angular 5 form examples check out this post here.

A small change has been added to animations for your application.

You can now invoke an animation when a desired value is incremented or decremented. 

animations: [
  trigger('newAnimation', [
    transition(':increment', group([
      query(':enter', [
        style({ color: 'orange', fontSize: '50%' }),
        animate('0.8s ease-out', style('*'))
      ])
    ])),
    transition(':decrement', group([
      query(':enter', [
        style({ color: 'black', fontSize: '50%' }),
        animate('0.8s ease-out', style('*'))
      ])
    ]))
  ])
]

This is a very handy feature as many use cases of an animation can depend on a value changing but having two new aliases in :increment and :decrement allows us to apply a specific animation to a value going up or down, in this case we want the font size and color to be affected.

There has been some minor changes here, including the deprecation of the HTTP API. @angular/http which has now been replaced by @angular/common/http.

Pipes have been overhauled and no longer rely on the Intl API. The most common pipes that you might have used that would rely on this are number, percent, currency etc.

The currency pipe now takes a string as a second parameter.

{{ 20 | currency:’EUR’ }}

If you don’t want to use the new pipes you can still get access to the older versions by importing DeprecatedI18NPipesModule .

These are just a small snippet of the changes. For an extensive look at all updated pipes have a look here.

While the ever changing semantic versioning may get on the nerves of some of the dev community, Angular 5 a pretty nice update overall.

These frequent big updates are a smart move on behalf of the Angular team. It increases the marketability of the framework and also constantly keeping it in the limelight each time while not providing anything too earthshattering.

I’ve only covered some of the new features here, feel free to check them out in summary by Traversy Media.

I’m also still a big fan of Gary Simon’s content from Coursetro. So feel free to check that out too.

Feel free to check out the Angular release schedule here as well.