It's no longer a piece of news: Angular 4's out (since the 23rd of March)! The release followed the team's announcement that they would start implementing Semantic Versioning. Have you tried it yet? If not, then let me “do the honors” for you: let me stir up your curiosity with a “teaser” before you take it for a test drive! A “teaser” that will glide you through all its highlights, new performance improvements, under the hood changes and a focus on those features that will make migrating to this new version of Angular so very smooth.
The very first “change” is that... there is no breaking change! That's right, you should know from the very start that:
- all the changes brought to this version of Angular are under-the-hood changes
- that its improvements target performance mostly. So your current code should be working with Angualr 4, too. It won't get impacted!
Another proof that the team behind it ensured that you, the developer, will be able to seamlessly update to this new release, is that Angular 4's backwards compatible with Angular 2.2 (since, as you well know it, there is no Angular 3; the development team decided to take a bigger leap straight to its 4th version).
With all these “bits” of highlights in mind, let us dive deeper into the load of new features that you will definitely want to use in your work as a Drupal developer in Toronto:
1. Animations Now Have Their Own Standalone Module
It's a perfect example of performance-targeting improvements that Angular 4 ships with. And it also is one of the few things that you DO need to change once you run your update.
In short, animations in Angular 4 (or “just” Angular, as its developers prefer to call it) will no longer be a pre-built part of @angular/core. Therefore: you'll no longer have to overload your app with unnecessary animations, if it doesn't actually use does animations.
No more unnecessary burdens of code shipped to your users, by default, along with your app!
Instead, animations have their own package @angular/platform-browser/animations now. If your app does include animations, you'll now need to import them from @angular/animations.
2. Universal Levels Up to a Core Module in Angular 4
Server-side rendering (rendering to virtual DOM through server requests or, simply put: “slicing” the same HTML content in virtual DOM to the server, making it easier for the browser to render it whenever it gets a new content request) is now easier than ever! With Universal now in core, you'll be able to do this with great ease:
import { platformServer, renderModuleFactory } from '@angular/platform-server'And you should know that making Universal a core module in Angular 4 implied loads and loads of effort from its development team so... a mental “thanks for easing my work!” will do!
3. ngIf with else: A New “else” Syntax To Use in Your Templates Now
What does this mean? The fact that you get to use an “if... else” syntax in your component HTML templates now?
Just imagine this scenario: you have a non-logged user or you need to wait for the user login request to be completed before you display the message in your app.
What do you do then?
It's the perfect context of use for the “if...else” syntax:
<element *ngIf="[condition expression]; else [else template]">
</element>
4. EMAIL: A New Validator That Angular 4 Introduces
If up till now you used to have minLength, pattern, maxLength and reuired, now email joins “the party”, too.
It's the new validator that Angular 4 brings along and which helps you “authenticate” the input as a valid email.
5. Paramap: A New Interface for Getting the Parameters Of an URL
Say “Goodbye” to params or queryParams and say “Hello” to paraMap or queryParaMap!
Now a quick sum up of the key advantages that this new map-like type of structure for representing the route parameters brings:
- in Angular 4 you get to choose between get () and getAll() (so from getting a single value or all the available ones). In other words: you get either just one string or an array of strings
- the map structure is safer than the key-value object one (where you had an entire array of possible types that the parameter value could take)
6. The “tag” Template Becomes “ng-template”
No worries about the update, though! As you're switching over to Angular 4, you'll get a “warning” message at some point during the process, informing you that the “template” tag that you're currently using is deprecated. It's then that you should “level up” to “ng-template”.
7. Typescript 2.1 Is The New “Norm” Now
Another key change worth your attention is that Typescript 1.8 (along with older versions, obviously), has grown deprecated. So, TypeScript 2.1 is the new “norm” in Angular 4.
Wrapping Up:
- Angular 4 brings some really tempting performance improvements, aimed at reducing the heavy load of code in your app
- it brings along some truly tempting features (paramap, ngif with else)
- it doesn't make migration a “risks-taking” one, since there scarcely are any breaking changes to affect your code
- the Angular team will be releasing new features using semantic versioning, therefore “assimilating” them, on the fly, will be more streamlined than ever!
In other words: you basically have to “excuse” for not migrating to Angular 4 and not streamlining your app development workflow!