Angular 4’s new features with simplicity

Karthik G

Starting with this blog, let’s clarify that Angular 4 hasn’t changed that much. Some under the hood changes, some improvements and performance improvements. But still, whatever the code you write should work in Angular 4. Now, this is a great news. Now, to begin with, the name should have something to look at it. Angular 2 was completely a rework of Angular 1, so we were talking about two different frameworks there. Now Angular 2 is simply the next version of Angular 2 and if you think why not Angular 3, then the answer is simply because of some internal conflicts. So they skipped the version 3 and simply went with the name Angular 4.

Now we do have some new features and many under the hood changes. Mainly,

1. ng-if:
Earlier in Angular 2, if you wanted to use ng-if with multiple conditions or specifically with the else clause, you would probably write it like this.

<p *ngIf = ”showFirst”> You can either see paragraph…..</p>
<p *ngIf = “!showFirst”> ….or this one.</p>

Here we simply write two ng-if statements wherein the second one we simply check the opposite like above. Now with Angular 4, you officially have an else statement and use it like this.
<p *ngIf = ”showFirst; else elsePart”> You can either see paragraph…..</p>
<ng-template #elsePart>
<p> ….or this one.</p>

This might look complex but is very simple. You wrap your alternative content in a ng-template a new component introduced with Angular 4. This should replace any template in HTML you used in an Angular template. So in this, you wrap the content and put a local reference in ng-template (elsePart) which should do the job. Of course, the old method surely works and nothing is wrong in using that.

Mobile Strategy

2. Renderer :
We already have a renderer which is used to change the style, for example, the color of the background and is written like this.

constructor( private renderer : Renderer ){}
onChangeBackground( element: HTMLElement ){
this.renderer.set ElementStyle( element, ‘backgorund-color’, ‘red’ );

This is nice and this feature generally is still available. The old renderer here now is deprecated and we have it as Renderer2. This mostly offers the same methods, some change in the name though. The name got changed because under the hood many things got changed and it’s one of them. Now the important note that, the old one still works but will be removed sometime in the future. So just a recommendation to use the latest one instead of the old one.

Now, coming to the all new features which have been added to the Angular 4 and that is,

Email Validator:
In the past in Angular 2, if you had an input field, it should hold the email address, you probably used the pattern validator together with some regular expression to check or validate the correct email address.

With Angular 4 there is simply an email validator. You can just drop the email directive on your input on validators class you used it for all the validators and you are good to go. Behind the scenes, it basically does the same you did before with the pattern validator, but it’s the more convenient way of using this. Of course, the pattern validator still exists if you want to use it for any other patterns. For email, it’s just this.

<input type = “email” [(ngModel)] = “email” required pattern = “[a-z0-9!@#$]*”>

<input type = “email” [(ngModel)] = “email” required email>

Here email will automatically validate as you did it before using patterns and regular expressions.
These are the most important new features and under the hood changes that we have. The other changes are again under the hood changes. For example,
1)Now you may use Typescript 2 before that only Typescript 1.8 was supported and you can have a look at the document for more information. Again it’s only an option and nothing like you have to change here.
2)The flat modules which made importing a bit easier behind the scenes or specifically which allow your build tool to reshape your code, which means to remove any code you don’t really use.

Now for some deprecations, which means that the features which will be removed in the future but not for now. But in fact, they are really never removed. So there are two of those now.
1)The new renderer now being available as Renderer2.
2)The animations package.

Now the animation package is an important change prior to Angular 4. In Angular 2 you imported all the triggers, states, styles etc. And so all these functions from @angular/core.

import { animate,
State, style,
}from ‘@angular/core’;

Now you have to do the same from @angular/animations. The general syntax hasn’t changed. But the way you import them has. You have a new separate package for animations now.

import { Component, Renderer } from ‘@angular/core’
import { animate,
State, style,
}from ‘@angular/animations;

Now you also have to add a new module in your @module i.e ‘BrowsersAnimationsModule’ which is then imported by

import { BrowsersAnimationsModule } from ‘@angular/platform-browser/animations’;

Now as you see. For a developer, not that many changes that affect your code, nice changes which should affect the performance and size of your application and therefore a nice release and guess we can really look forward to Angular 5 and maybe more new features. So, for now, this is Angular 4 for you.

Google Certified Agency

about the author

Karthik G

Karthik, currently working at Techjini, has experience in developing front-end web applications. He has worked in platforms like AngularJS. Keen to learn new technologies.