More Infos
We use cookies on our website. Some are essential, while others help us improve the site and your experience.
To the Privacy Policy

Angular 7 - All Important Information about the New Version

The innovations of the latest version of Angular in detail

The seventh major version of Angular – a popular JavaScript framework for creating web apps – was released in mid-October. The update comes with numerous innovations that affect Angular Material as well as the CDK (Component Development Kit) and the Command-line Interface (CLI). In this blog article we present the new features in detail.

Updated dependencies for TypeScript and Co

The web framework is primarily based on the TypeScript programming language, but also uses RxJs and Node.js. In the course of the version jump, the library versions were also updated. Angular 7 works with the current version 3.1 of TypeScript and RxJS 6.3. In addition, Node 10 will be supported from now on, although support for the slightly older Node 8 will remain.

More effective creation of web apps thanks to CLI prompts

The new prompts in the CLI are considered to be a particularly useful innovation. These provide the user with recommendations for using additional features when executing frequently used commands such as ng new . The framework's suggestions allow the user to more easily discover other parts of the software such as routing or support for SCSS. The CLI prompts can also be used with the Schematics workflow tool.

Two new features at Angular CDK

A first new feature is the virtual scrolling function. This makes navigating through lists easier and faster. It loads or removes individual elements from the programming interface based on the displayed part of a list. As a result, the function simulates rendering all items, but only calculates the visible portion of the list. This procedure leads, for example, to a SPA (single page application) with a large number of components being loaded more quickly.

The second novelty is Drag & Drop. With this module, developers can create elements that allow the user to arrange individual building blocks in a list or to move them to another list. Before the new functions can be used, you must first import the DragDropModule and the ScrollingModule into ngModule .

Improvement in performance

Another focus of the development team was to improve the performance of the framework. Many factors have a negative impact on the speed of an application - for example a SPA (single page application). It was found that developers often use the polyfill reflect-metadata in the production of web apps. However, this is only necessary during development. In Angular 7, the polyfill is automatically removed from the corresponding file after you build the application. In addition, the software now issues a warning if the application bundle exceeds the size of 2 MB.

This is how the update to Angular 7 works

How to update from Angular 6 to Angular 7 is explained in detail at https://update.angular.io/ . However, it is also possible to carry out the update using a single command:

ng update @angular/cli @angular/core

Incidentally, support for Angular 6 will remain for the time being. As you can read in the Angular release guide, the old version will continue to receive security updates and bug fixes until November 2019.