What is new in Angular 4?

Angular 4.0.0 is the most recent upgrade to widely used framework JavaScript to implement mobile and web solutions. It was released by Google team of developers in March. To get framework smaller and more fast-moving, to refine on speed and type checking Angular was improved with AOT or Ahead of Time Compilation support - View Engine, and the newest TypeScript version. At the moment Angular is known as a framework giving us a complex solution to build mobile and web applications not using any third-party solution.

Dive into Angular’s 4 latest

1. Component

Component Components and modularization are fundamental and essential blocks, containing logic and the view for building the applications in Angular.

2. Templates

Angular’s own template tag is used at the moment. It is ng-template. Using the deprecated template while updating to Angular 4, there will be an alert and it is going to be easily localised.

NgIf with else

There is also a possibility of using else syntax in your templates:

As

As is another addition to the template syntax. It is applied to make simpler the let syntax, allowing to hold the result in a template variable, to use it in the element. It is practically useful to keep a sliced collection as in the example below:

To subscribe to a pipe with async is practically useful. If race is observable, instead of the bad as in the example below:

3. CanDeactivate

The CanDeactivate interface contains an extra parameter to predict the next user navigation state. To predict the users’ behaviour logic can be implemented while users are interacting or navigating away from the current component.

4. Pipes

Titlecase

A new titlecase pipe is introduced in Angular 4. Each word the first letter is changed into uppercase as in the example below:

5. Service

Meta

New service introduction to meta tags updating:

6. Forms

There is a complex solution for handling forms in the application. Template driven or model driven style can be chosen now.

Validators

Existing validators such as required, minLength, maxLength and pattern are added. Due to new Email, it is possible to check if the input is a valid email.

Compare select options

Added CompareWith new directive helps to compare options from a select. Have a look at the example below:

7. HTTP

@angular/HTTP from @angular/platform-server is supported by platform-server. Search parameters have been added to simplify an HTTP request:

8. Router

ParamMap

To represent the parameters of a URL ParamMap a new interface has been introduced. Instead of using params or queryParams, it is used paramMap or queryParamMap as the choice between get()to get a value, or getAll() to get all values is offered:

9. Testing

A whole bunch of tools has been introduced for both unit and end-to-end testing. Redefining a template in a test has been simplified:

New Features of Angular 4

• View engine system reduces the size of the generated code. Animations have own package now as they have been extracted out of @angular/core. The result is easily found documentation, better taken autocompletion.
• Universality. It allows IT teams to render server-side.
• Source maps will be generated to provide a significant context.
• Declarative code: the component and the template are very declarative. It stands for the data streams simply plugging in without holding local variables and moving them to the template.
• The template binding syntax. If/else syntax can be used and local variables are assigned while unrolling observable.
• Angular is easily updated to the latest version.
• Flat ES Modules are able to help tree-shaking, reduce generated bundles size, and speed up build, transpilation, and browser loading in a certain way.
• Experimental ES2015 Builds option. Packages are also loaded in the ES2015 Flat ESM format.
• Code closure annotations: it allows to gain benefits from advanced closure optimisations, having a result in less bundle sizes and greater treeshaking.

Drawing a line

Angular 4 has introduced more updates, and it is planned to make incremental, highly predictable, fairly stable changes regularly. The libraries will be given support using Javascript and Typescript.

Google team of developers is going to continue elevating Angular’s capabilities such as @angular/http, @angular/service-worker, and @angular/language-service out of experimental, making it more dynamic.