What’s New In ANGULAR 7?



The 7th major version of Google’s popular framework, Angular has been released. The release primarily focuses on CLI prompts, drag-and-drop capabilities and Virtual Scroll in the CDK(Component Development Kit), Angular Material. Also get the support of Node 10, Typescript 3.1, RxJs 6.3. Unfortunately, Ivy-Renderer did not become part of this release.

Let’s take a closer look at some highlights,

How to Update?

For updating your existing Angular project to version 7,

Visit update.angular.io for more information and guidance regarding the updates.

CLI prompts

The command-line interface provides more information about common commands such as ng new or ng add @ angular / material. This helps you to find built-in features like routing or support for SCSS.

The documentation of angular.io now includes documentation of Angular CLI.

Angular Material & CDK

Material design received a major update this year. You can see the design guidance, tooling, development component from Material. Some new functionality is added in CDK like virtual scrolling, Drag and Drop by importing ScrollingModule and DragDropModule.

Virtual Scrolling

The CDK now has scrolling capability which means that your loading/ unloading of DOM element is a bit faster & user-friendly. You can use that by importing ScrollingModule.

Here is how you can implement this feature in your application,


Drag & Drop

The CDK has now support for drag and drop which includes automatic rendering as user move items from one place to another place. Method used for reordering of lists is moveItemInArray And for transferring items is transferArrayItem.

Here is how you can implement this feature in your application,

In app.component.html file,

In app.component.ts file,


Performance Improvements

As per tradition with the release of new versions, the Angular team also took a
look at the performance of the framework for version 7. We included the reflect-metadata polyfill in production, which is only needed in development.

In version 7, as a part of update it will automatically remove a polyfills.ts file, when you are building your application in JIT(Just-In-Time) mode, removing this polyfill from production builds and makes your application smaller in size.

This next feature is warning application creators when they are going over the budget with their bundle size. The default bundle size is a warning at 2 MB and an error at 5 MB. These default bundle size can be easily changed in your angular.json file by changing the bundle size in the angular.json file.

Angular Element

Angular Elements components now support content projection for custom elements.


With Angular 7, A new major release has come out, which is having many small improvements and designed by maintaining the dependencies and other performance improvements. But Ivy still is in under development so did not become a part of this update. Many partner projects like Angular Console, NativeScript, StackBlitz, @angular/fire are continuously helping Angular to expand environment.


Pooja Ghetia Angular Developer

I am Angular Developer who works at Yudiz Solutions Pvt. Ltd. - a leading Web, Mobile Apps and Game Development company. I like writing blogs to share my knowledge and ideas with others. I'm always interested in learning about the latest technology.

Comments are closed.