What’s new in Angular 7?

Now Angular 7 is released!

Google’s popular JavaScript framework for building mobile and desktop applications.

Angular provides dependency injection, particularly useful for assembling data services for applications, along with the use of an HTML template to compose components. Based on the Model-View-Controller, or MVC, programming structure, AngularJS is especially useful for creating single page web apps. The tool provides everything you need to create and manage dynamic frontends for web applications. Its modular approach to web design and massive support community make AngularJS a popular tool among professional developers. With a JavaScript library based on standard JS and HTML, AngularJS automatically takes care of things like DOM manipulation and AJAX glue that would otherwise have to be coded by developers.

In Angular, developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program.

So, let's see what’s new in Angular 7

Angular Material

Angular Material got fancy this year with many new updates, including the new homepage for material, material.io. Here you can get design guidance, development components, tooling, and stay up-to-date with the latest news. If you are an Angular Material user, as of v7 you should notice some little visual differences as the library aligns itself with the updated spec of Material Design.

Virtual Scrolling

The CDK now has virtual scrolling capabilities that you can use by importing the ‘Scrolling Module’! Virtual scrolling is the loading/unloading of DOM elements based on where the user is at in a list of items. This means that your huge scrollable lists just got a lot faster!

Support for Node 10

Node v10 is the latest version of the Node.js platform which is used by the Angular CLI and most front-end development tools nowadays. v7 has now support for v10 of Node but v8 is also still supported.

CLI Prompts

Angular 7 introduces a new nice feature that allows the CLI to prompt users when executing commands as ng new or ng add. This enables users to make decisions for choosing the right built-in features to include or ignore at many points of the life-cycle of the project's creation and configuration.

DragDropModule

With Angular 7, drag and drop support is added on the CDK. Items are rendered as long as the user is moving elements. Developers can use methods like moveItemInArray for reordering lists or transferArrayItem for moving items between lists.

Support for TypeScript v3.1

TypeScript 3.1 is the latest version of TypeScript, the official language for Angular. Angular 7 requires the latest version of TypeScript.

Support for HTML Element

is a new standard HTML tag that was introduced by the Web Component specification.

Router

A new warning has been added if you try to trigger a navigation outside of the Angular zone, As it doesn’t work if you do so, Angular now logs a warning (only in development mode). This is pretty rare but can happen for example if you try to redirect your users when an error occurs in the application by providing a custom ErrorHandler.

Deprecations

As it’s usually the case with major releases, a few things have been deprecated. If you are using to declare a form in your template (you don’t have to, as form also activates the NgForm directive), this selector is now deprecated and should be replaced by .

Application Performance

Google is committed to improving the performance of the applications and so it first identified the common errors made across the ecosystem. It analyzed the fact that the developers added the reflect-metadata polyfill production, which only helps during the development process. In order to solve this issue and upgrade it for the variant 7, Google decided to eliminate the polyfills.ts file automatically, rather adding it as a built-up step for the creation of application in the JIT mode. The polyfill gets removed from production builds by default.

Better Accessibility of Selects

The Angular team has also worked on improving the accessibility of the Selects in the application. They have used the native select element in the mat-form-field. The performance, accessibility, and usability of the native select became better. However, the team rather chose mat-select that offers comprehensive control of the presentation options.

Budget Bundles

New projects are also now defaulted using Budget Bundles which work to notify you when your app is reaching size limits. By default, you get warnings when you reach 2MB and errors at 5MB. And when you need a little more space, just jump in your angular.json and adjust as necessary.

DoBootstrap

Angular 7 added a new lifecycle hook that is called ngDoBootstrap and an interface that is called DoBootstrap.

Partner Launches

According to the Angular team, one of the major factors leading to the success of front-end development is the increasing number of community members. Thus, it has been further looking up to associate with various community projects unveiled in recent times.

 

According to the official information, Angular’s new project and the next-gen rendering pipeline Ivy hasn’t been introduced with the release of Angular 7 as the team is still working on it. The current status is that it is under the active deployment process.

 

In the meantime, the upgrade of your applications should be very easy. All our materials are up-to-date with these changes. As you can see, the release contains very few interesting features, but Ivy is making progress and Angular 8.0 will probably have more cool stuff!

You can share your experiences with us in the comment section. Thank you!