BT

InfoQ Homepage News Angular 7 Released with Virtual Scroll, Drag and Drop, CLI Prompts and More

Angular 7 Released with Virtual Scroll, Drag and Drop, CLI Prompts and More

Bookmarks

Google has delivered Angular 7, a new major version of the web popular framework. This version brings CLI Prompts, Angular Budgets, Virtual Scroll, Drag and Drop, and more.

The Angular CLI, a command-line interface tool used for developers to initialize, develop, scaffold, and maintain Angular applications, will now prompt developers when running common commands like ng new or ng add @angular/material, aiming to help developers discover built-in features like routing or SCSS support. In addition, any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection, once CLI Prompts have been added to Schematics.

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},

Angular Budgets is a feature which allows developers set budget thresholds in angular.json configuration, to ensure that parts of an application stay within the size of the defined boundaries. Budgets has received improvements related to performance in Angular 7, now warning developers when the initial bundle of an application is more than 2MB, and raising an error at 5MB. It is easy to customize these budgets:

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Another improvement related to performance is that Angular 7 will remove the reflect-metadata from polyfill.ts file in production; this polyfill is only needed in development, and many developers were including it in production.

Virtual Scrolling has been added to CDK, loading and unloading elements from the DOM based on the visible parts of a list, and making it possible to build very fast experiences for users with very large scrollable lists.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Another feature added in CDK is the Drag and Drop support. It enables developers to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, etc.

For most developers, a single command should be executed in order to update to Angular 7:

ng update @angular/cli @angular/core

Detailed information and guidance on updating an application to Angular 7 can be found on update.angular.io. According to Google, early adopters have reported that this update is faster than ever, and many apps take less than 10 minutes to update.

The documentation has been updated, now including reference material for the Angular CLI. The entire list of changes is available in the Release Notes.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Drag & drop support touch screen

    by Javier Paniza /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Does drag&drop work with touch screens?

    My laptop is a windows 10 with touch screen, I usually use touch screen over mouse and found that many applications, like Mailchimp or Trello has a poor support for touch screens, specially that drag&drop part.

    As programmer my web applications support drag&drop for touch screen, so it's technically possible.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.