Angular is a popular framework for developing mobile and web applications. The first version of Angular was released in 2012 by Google. Through the years, it has seen tremendous growth with every version enhancing performance and developer experience. In this article, we will discuss some of the powerful features of Angular 7.

New Features Of Angular 7

CLI Prompts

The CLI prompts in Angular 7 has been upgraded to v7.0.2 with several new features. Users will now be prompted when they type commands such as ng-new, ng-add, and @angular/material. This enables them to identify the in-built routing, SCSS support.

Additionally, CLI prompts have also been added to Schematics. As a result, CLI prompts will prove beneficial to schematics.

Updated Dependencies

There is support available for different upgrades in dependencies in Angular 7.

Support for Node v10

There is support available for Node V10 with backward compatibility in Angular 7.

In Angular 7, the latest version ofRxJs (version 6.3.3) is available. It contains a host of remarkable changes and additions.

Typescript 3.1

TypeScript version in Angular 7 has been updated from 2.7 to 3.1, which is its latest release. It is now mandatory to use the latest version of TypeScript while working with Angular 7.

Virtual Scrolling

Angular 7 features a new type of Virtual Scrolling that has the ability to load and unload certain items from the DOM based on the part of the list that is visible. This leads to a faster experience for users who have extremely large scroll lists. With the virtual scrolling bundle, users are offered helpers that respond to each and every scroll event.

Virtual Scrolling increases performance by allowing the height of a container element to be precisely the same as the height of the remaining elements that have yet to be rendered. With this, the only visible items in view are rendered, thus creating a faster end-user experience.

Drag and Drop

With the new drag and drop module of Angular 7, users can now easily develop drag and drop interfaces that are backed by sorting within a list, transferring items between previews, placeholders, and lists, and supporting free draggings, custom drag handles, and animations.

Angular Material and Component Dev Kit (CDK)

In Angular 7, material design has received minor visual updates and enhancements. Other improvements in Angular Material and CDK include dynamic loading and unloading of parts of the DOM, virtual scrolling, refreshing, loading large lists of data. Moreover, drag-and-drop functionality can now be fitted to applications in Angular 7 by importing DragDropModule or ScrollingModule.

Improvements in Application Performance

Google's development team has always been particular on enhancing performance, and during the process, they identified that in the production most of the developers were employing reflect-metadata, which was actually needed only in the development. To fix this issue, a part of Angular 7 has been made to remove this from the polyfills.ts file automatically.

A New ng-compiler

In Angular 7, there is a new compiler available, called the Angular Compatibility Compiler (NGC). It makes 8-phase rotating ahead-of-time (AOT) compilation possible. The majority of the applications that use Angular will be able to see a large cutback (95 to 99 percent) in their bundle sizes. You know it's important to progress when Angular packages' actual size becomes significantly smaller than what the majority of other languages would take for storing the string "Angular."

With ngcc Angularnode_module compatibility compiler, the node_module compiled with non-ivy NGC is upgraded into the ivy compliant format.