Top new features of Angular 4.0





Angular 4.0 is now officially released on 23rd March 2017.
You might probably be wondering it was Angular 2 that was running and now Angular 4. Where has Angular 3 gone?
The answer is much simpler than you might expect. The angular core team have certain components which have been targeted to 4.0 while the Angular core was still in 3.0. These components are necessary angular components and has to be shipped with Angular library. So to cope with this conflict, they have skipped version 3 and target all the components to version 4.0 only.

One of the great thing about Angular 4 is that it is backward compatible with Angular 2.

Angular releases over 2.0

Release Features
2.1 Route Preloading
2.2 Ahead of Time (AOT) + ngUpgrade
2.3 Language Service.
* The language service is useful for IDEs to integrate with Typescript. Its not just they are shipping the compiler. Its been better now to show errors and warnings on the fly.

Angular transition from 2.3 to 3.0

Release Features
Patch 2.3.1 No Features, No Breaking Changes
Minor 2.3.0 New Features, No Breaking changes
Major 3.0.0 New Features, Potential breaking changes

Angular team has clearly mentioned that every release will be - Predictable, Transparent and Incremental. It will not be like what happened when the transition took place from Angular 1 to Angular 2.

Angular 4 future evolution (Tentative schedule)

Angular 5 - September / October 2017
Angular 6 - March 2018
Angular 7 - September/October 2018

Upgrading to Angular 4

It's very easy to upgrade to Angular 4 from Angular 2 app. We just need to run the following commands.

For Mac:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

For Windows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Angular Universal

Now Angular app can be rendered on the server using Angular Universal. For more info check out https://universal.angular.io/

Semver (Semantic Versioning) now

Angular Team will now be using Semver to version their releases. For more details to Semver you can visit http://semver.org/

Angular 4 new features

Animations

Animations now have their own package @angular/platform-browser/animations

Templates

The template tag has been changed to ng-template. The template tag being more generic to other frameworks, Angular has made it to ng-template.

Else is now supported with ngIf 

<div*ngIf="stack.length > 0; else handleBlank"><p>The stack has some elements.</p>
 <ng-template#handleBlank>Stack is empty. Please add some numbers.
the handleBlank is a local reference to the ng-template. We use this reference name in the else clause of the ngIf. The old way will still work.

Typescript 2.2 is supported now.

Since Angular 2 release, the team has made the Angular framework easy to code with Typescript (it can still be used with javascript and dart). Typescript is a syntactical sugar. Typescript 2.2 is supported now in Angular 4. For more info visit https://www.typescriptlang.org/

The 'as' keyword

The 'as' keyword is used to store the output of a result in a temporary variable. For. e.g.
<div ngif="let price of book | currency as LocalPrice; index as = i">
{{i}} ) {{book.Name}} - LocalPrice
</div>

It can effectively be used as an output of async result. 
observable_or_promise_expression | async as result
{{result.prop}}

Http

Search parameters have been simplified in http request.
http.get('${apiUrl}/api/getBookInfo', {params : {id : 1} });

In previous version: 
const params = new URLSearchParams();
params.append('id', 1);
http.get('${apiUrl}/api/getBookInfo', {search : params });

Pipes

A new pipe has been introduced with the Angular pipes collection that is - titlecase. It changes the first letter of each word to the uppercase. For e.g. the below code will display "Hello World".

<p>{{ 'hello world' | titlecase }}</p>

Test

To override a template in a test has been simplified.

TestBed.overrideTemplate(DialerComponent, '<div>{{dialer.name}}</div>'

In previous version: 
TestBed.overrideComponent(SomeComponent, {
 set: {
    template: '<div>Overridden template here</div>'
    // ...
 }
});

Email Validator 

An email validator is introduced along with other validators in Angular. The email validation can be done with Regex, however since email is very frequently used field, so it does make sense to introduce a inbuilt validator for this.
Author :