Angular 7 – CLI Prompts, Virtual Scroll, Drag and Drop and more

October 18th, 2018

Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

The 7.0.0 release of Angular is here! This is a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. This release contains new features for our tool chain, and has enabled several major partner launches.

Angular 7 - CLI Prompts, Virtual Scroll, Drag and Drop and more
Virtual Scrolling can improve the performance of applications

How to update to v7

Visit for detailed information and guidance on updating your application, but thanks to the work we did in v6, updating to v7 should be one command for most developers:

ng update @angular/cli @angular/core

Early adopters of v7 have reported that this update is faster than ever, and many apps take less than 10 minutes to update.

CLI Prompts

The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.

CLI Prompts have been added to Schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.

Application Performance

Continuing our focus on performance, we analyzed common mistakes across the ecosystem. We discovered that many developers were including the reflect-metadata polyfill in production, which is only needed in development.

To fix this, part of the update to v7 will automatically remove this from your polyfills.ts file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.

With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI. New applications will warn when the initial bundle is more than 2MB and will error at 5MB. These budgets are easy to change in your angular.json.

These budgets align with warnings that can be shown to users taking advantage of Chrome’s Data Saver features.

Angular 7 - CLI Prompts, Virtual Scroll, Drag and Drop and more
Chrome Data Saver

Angular Material & the CDK

Material Design received a big update in 2018. Angular Material users updating to v7 should expect minor visual differences reflecting the updates to the Material Design specification.

Angular 7 - CLI Prompts, Virtual Scroll, Drag and Drop and more
The Material Design Refresh includes small changes developers should be aware of

Newly added to the CDK, you can now take advantage of Virtual Scrolling and Drag and Drop by importing the DragDropModule or the ScrollingModule.

Virtual Scrolling

Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists.

Read more about Virtual Scrolling

Drag and Drop

Angular 7 - CLI Prompts, Virtual Scroll, Drag and Drop and more
Drag and Drop on an example dashboard

Drag and drop support is now in the CDK and includes automatic rendering as the user moves items and helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).

Read more about Drag and Drop

Improved Accessibility of Selects

Improve the accessibility of your application by using a native select element inside of a mat-form-field. The native select has some performance, accessibility, and usability advantages, but we’re keeping mat-select which gives full control of the presentation of options.

Learn more about mat-select and mat-form-field

Angular Elements

Angular Elements now supports content projection using web standards for custom elements.

<my-custom-element>This content can be projected!</my-custom-element>

Partner Launches

Angular owes a huge amount of its success to the community, and to that end we’ve been working to partner with several community projects that have launched recently.

Angular 7 - CLI Prompts, Virtual Scroll, Drag and Drop and more
StackBlitz 2.0 Supports multipane editing and the Angular Language Service
  • Angular Console — A downloadable console for starting and running Angular projects on your local machine
  • @angular/fire— AngularFire has a new home on npm, and has its first stable release for Angular
  • NativeScript— It’s now possible to have a single project that builds for both web and installed mobile with NativeScript
  • StackBlitz — StackBlitz 2.0 has been released and now includes the Angular Language Service, and more features like tabbed editing

Documentation Updates

We’re always working hard to improve our guides and reference materials. The documentation on now includes reference material for the Angular CLI.

Dependency Updates

We’ve updated our dependencies on major 3rd party projects.

What about Ivy?

We’ve been continuing work on a new initiative called Ivy — our next generation rendering pipeline. Ivy is currently under active development and is not part of the v7 release. We are beginning to validate the backwards compatibility with existing applications and will announce an opt-in preview of Ivy as soon as it is ready in the coming months.

Keep an eye on this blog, on Twitter, and on YouTube for the latest information.

Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.