Angular 7: New Features

Angular
0 80

Get real time updates directly on you device, subscribe now.

2 min read

The Angular team has released the new version 7.0. This new version of Angular is a major release which spans across the entire platform. This includes the main core framework, Angular Material, and the CLI. Let’s look at some of the new features that are introduced in Angular 7.

New Features of Angular 7

CLI Prompts

The new version Angular CLI will prompt the developers when they run common commands like ng new or ng add @angular/material to help them 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.

The documentation on angular.io now includes reference material for the Angular CLI.

Application Performance

The v7 of Angular helps in increasing the performance of the application by automatically adding or removing the reflect-metadata in the polyfills.ts file while building the application. If we are building the application for production release, then the reflect-metadata will be automatically removed from the file. This helps in making applications smaller in production.

With v7, you also get to take advantage of Bundle Budgets in CLI while creating a new project. This Bundle Budget will warn you if the initial bundle is more than 2MB and will show an error at 5MB. You can easily change these budgets in your angular.json file.

Angular Material

For Angular Material and the CDK (Component Dev Kit), Angular 7 features visual improvements from the Material Design 2018 refresh. The developers can now take advantage of Virtual Scrolling and Drag and Drop by importing the ScrollingModule and DragDropModule.

Virtual Scrolling: This feature can now help the users dynamically load and unload parts of the DOM to build high-performing, large lists of data.

Drag and Drop: This 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).

How to update to v7

For detailed information and guidance on updating your Angular application please visit the update.angular.io.