New features Angular 6.1
- Transfer
July 25 released Angular 6.1. This minor release of the framework can be considered as a replacement for Angular 6.0, which includes some innovations and bug fixes. This material, translated notes from the blog Angular, is devoted to the main new features of Angular 6.1.
Now the developers of Angular-applications can take advantage of the new feature of the router, which allows you to remember and restore the user's location on the page - the scroll or scroll position. When you go to the next page of the application, the scrolling position is reset, and the user's position on the previous page is remembered. Pressing the “Back” button opens the previous page, taking into account the saved scroll position.
To enable this feature, you can use the following command:
It is expected that in the future major release of the platform the default router will be configured to restore the scrolling position.
There are many ways to associate CSS rules with components in which these rules are defined. This is called View Encapsulation. Encapsulation can be switched to using ShadowDOM v1 in the component decorator. This is done like this:
Now applying a value
ShadowDOM v1 is better cross-browser support than the previous version of the standard. The work on this standard was initially carried out taking into account the possibility of its use in various browsers. You can read about Shadow DOM v0 and v1 differences here .
Innovations ShadowDOM v1 will be interesting, mainly to the authors of the library and advanced developers. It should be noted that the use of Shadow DOM v1 is necessary for the use of content projection (content projection) within the framework of Angular Elements technology.
In this release, the capabilities of Schematics have been improved , with the result that you can now return a new rule from an existing rule . This allows developers to more flexibly define a set of rules for Schematics.
Now Angular, along with TypeScript 2.7, supports TypeScript 2.8 and 2.9 . One of the important features of TS 2.9, which is useful to many developers, is related to errors, such as the following:
Changes have been made in TS, due to which, firstly, such errors no longer appear, and, secondly, the code no longer needs to be rewritten in order to bring it to a state corresponding to similar export patterns.
In the new release of Angular, there are other changes, for example, concerning the processing of malformed URLs ( malformedUriErrorHandler ) and aimed at improving work with associative arrays and objects ( KeyValuePipe ). A new version of angular-cli has also been released .
Angular 6.1 is the latest scheduled minor release of version 6.x. Therefore, in the foreseeable future, we can expect the release of beta versions of Angular 7.0 and the emergence of new interesting features in this framework.
Dear readers! What innovations of Angular 6.1 seem to you the most interesting? What do you expect from Angular 7.0?
Router and scroll position saving
Now the developers of Angular-applications can take advantage of the new feature of the router, which allows you to remember and restore the user's location on the page - the scroll or scroll position. When you go to the next page of the application, the scrolling position is reset, and the user's position on the previous page is remembered. Pressing the “Back” button opens the previous page, taking into account the saved scroll position.
To enable this feature, you can use the following command:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})It is expected that in the future major release of the platform the default router will be configured to restore the scrolling position.
ShadowDOM v1 and View Encapsulation
There are many ways to associate CSS rules with components in which these rules are defined. This is called View Encapsulation. Encapsulation can be switched to using ShadowDOM v1 in the component decorator. This is done like this:
@Component({
templateUrl: './my-component.html',
encapsulation: ViewEncapsulation.ShadowDom
})
export classMyComponent{ }Now applying a value
ViewEncapsulation.Nativethat means using Shadow DOM v0 is deprecated. ShadowDOM v1 is better cross-browser support than the previous version of the standard. The work on this standard was initially carried out taking into account the possibility of its use in various browsers. You can read about Shadow DOM v0 and v1 differences here .
Innovations ShadowDOM v1 will be interesting, mainly to the authors of the library and advanced developers. It should be noted that the use of Shadow DOM v1 is necessary for the use of content projection (content projection) within the framework of Angular Elements technology.
Combining Schematics rules into chains
In this release, the capabilities of Schematics have been improved , with the result that you can now return a new rule from an existing rule . This allows developers to more flexibly define a set of rules for Schematics.
TypeScript 2.9 support
Now Angular, along with TypeScript 2.7, supports TypeScript 2.8 and 2.9 . One of the important features of TS 2.9, which is useful to many developers, is related to errors, such as the following:
Exported variable ‘x’ has orisusingname ‘y’ fromexternal module ‘z’ but cannot be namedChanges have been made in TS, due to which, firstly, such errors no longer appear, and, secondly, the code no longer needs to be rewritten in order to bring it to a state corresponding to similar export patterns.
Results
In the new release of Angular, there are other changes, for example, concerning the processing of malformed URLs ( malformedUriErrorHandler ) and aimed at improving work with associative arrays and objects ( KeyValuePipe ). A new version of angular-cli has also been released .
Angular 6.1 is the latest scheduled minor release of version 6.x. Therefore, in the foreseeable future, we can expect the release of beta versions of Angular 7.0 and the emergence of new interesting features in this framework.
Dear readers! What innovations of Angular 6.1 seem to you the most interesting? What do you expect from Angular 7.0?