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

Angular 7.0.0 release now available! This is the major release across the entire platform, including the core framework, Angular Material, and CLI tools that synchronize the major release. This release includes several new features for toolchain and has already resulted in several major partner releases.

Virtual scrolling can improve application performance

How do I update to V7

Visit update.angular. IO for details and guidance on updating the application, but because of the work we did in V6, updating to V7 requires only one command:

ng update @angular/cli @angular/coreCopy the code

Early adopters of the V7 version reported faster upgrades than ever, with many applications upgrading in less than 10 minutes.

The CLI prompt

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

CLI prompts have been added to Schematics, so any package that publishes Schematics can take advantage of them by adding X-Prompt to the Schematics collection.

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

Application performance

Continuing our focus on performance, we analyzed common errors throughout the Angular ecosystem. We find that many developers include reflect-Metadata polyfills in production environments, however this is only needed in development.

To fix this, a partial update to the V7 version automatically removes it from the Polyfills. Ts file and then includes it as a build step when the application is built in JIT mode, removing the polyfill from the built version by default.

When v7 is used, the new project uses the Bundle Council in the CLI by default. The new application will issue a warning when the initial bundle exceeds 2MB, and an error will be reported when the initial bundle exceeds 5MB. These parameters can be changed in angular.json.

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

These are consistent with the warnings that users can see using the Chrome Data Saver feature.

Chrome Data Saver

Angular Material & the CDK

Material Design received a major update in 2018. Angular Material users who update to V7 should see minor visual differences that reflect updates to the Material Design specification.

Material Design has been updated to include small changes that developers should be aware of

New users of CDK can now use virtual scrolling and drag-and-drop by importing DragDropModule or ScrollingModule.

Virtual rolling

Virtual scrolling loads and unloads elements from the DOM based on the visible part of the list, making it possible to build a very fast experience 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>Copy the code

Read more about virtual scrolling

Drag and drop

Drag and drop functionality on the sample dashboard

The CDK now supports drag-and-drop functionality and includes automatic rendering as the user moves elements, helper methods for list reordering (moveItemInArray), and moving elements between lists (TransferRArrayItem).

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>Copy the code
drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}Copy the code

Read more about drag and drop

Improve the accessibility of the Selects

Improve the accessibility of your application by using native SELECT elements in mat-form-field. Native SELECT has some performance, accessibility, and availability benefits, but we keep mat-SELECT, which has full control over the rendering of options.

Learn more about mat-SELECT and MAT-form-field fields.

Angular Elements

Angular Elements now supports content projection of custom Elements using Web standards.

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

Partner Release

Angular owes much of its success to the community, and we’ve been working with several recently launched community projects to that end.

StackBlitz 2.0 supports multi-window editing and Angular Language Services

  • Angular Console – a downloadable Console for launching and running Angular projects on the local machine
  • @Angular/Fire – AngularFire has a new home on NPM and has released a stable version for Angular for the first time
  • NativeScript – The NativeScript suite of code is now available for both Web and mobile
  • StackBlitz – StackBlitz 2.0 has been released and now includes Angular Language Service and more features such as multiple Tab page editing

Document update

We are always working hard to improve our guides and reference materials. The documentation for Angula. IO now includes Angular CLI references.

Depend on the update

We updated our reliance on major third party projects.

Ivy?

We’ve been working on a new project called Ivy — our next generation rendering pipeline. Ivy is currently under active development and is not part of the V7 release. We have already started to verify backward compatibility with existing applications and will release an optional Ivy preview as soon as Ivy is ready in the next few months.