What is new in Angular 4?
9 months ago
Dive into Angular’s 4 latest
Component Components and modularization are fundamental and essential blocks, containing logic and the view for building the applications in Angular.
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 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:
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.
A new titlecase pipe is introduced in Angular 4. Each word the first letter is changed into uppercase as in the example below:
New service introduction to meta tags updating:
There is a complex solution for handling forms in the application. Template driven or model driven style can be chosen now.
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:
@angular/HTTP from @angular/platform-server is supported by platform-server. Search parameters have been added to simplify an HTTP request:
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:
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
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.