5 Important New Features of Angular 7
Nov 28, 2018
A few weeks ago, Angular 7 was released alongside a few partner project updates. Surprisingly, most of the new features for Angular 7 actually come from those partner projects, not the framework itself.
The Angular team is currently focused on performance improvements, security and bug fixes. The main ongoing effort for performance is the Ivy renderer, which was not fully ready for Angular 7. It is likely to be released later next year, probably with Angular 8.
Here are the five main new features of Angular 7.
Angular CLI prompts
Remember the time when we had to remember all of the Angular CLI options? That time is now gone. From now on, our favorite command line tool has prompts to guide us along the way:
If you’d rather have a nice user interface than prompts, then Angular Console is what you need. Generating code or serving your project is just a few button clicks away:
Angular console can be downloaded at https://angularconsole.com/. It uses Angular CLI under the hood and is a nice UI for discovering more schematics and options. I definitely learned about a few hidden options by playing around with Angular Console for a few minutes.
Default Build Budgets
New Angular applications generated with CLI will warn you when the code bundle is more than 2MB and will error at 5MB. That way you can keep your application size under control. Your application build will fail when a big dependency gets added by accident.
In order to customize budgets, you can head to angular.json and tweak the different thresholds just like this:
In this example, production build would fail if the vendor bundle size were greater than 5MB. If it were greater than 2MB and less than 5MB, then you would get a warning.
Drag and drop support in CDK
The Angular Component Development Kit (CDK) now has drag-and-drop directives.
But what is the CDK? It’s a project that comes from the Angular Material team. After building so many components and directives, the team realized that a lot of features and patterns could be implemented and grouped in a single place, so they don’t have to be reinvented in every single project.
As a result, features such as modal windows, alerts, overlays, and now drag and drop, are available in the @angular/cdk package. And you don’t need Angular Material for it – it’s a completely independent toolkit.
Here’s what the code for a basic drag and drop implementation looks like. Just a couple of directives and you can put it in place:
For more info about drag and drop in the CDK, check out: https://material.angular.io/cdk/drag-drop/overview
Virtual scroll support in the CDK
Another great addition to the CDK is virtual scroll support:
Here again the API is fairly straightforward, and just a few lines of code are needed:
Angular 7 has no breaking changes and, alongside Angular CLI 7 and Angular CDK 7, it enables a lot of interesting features.
In order to easily upgrade, you can follow the instructions at https://update.angular.io/.
For most projects, upgrading is as easy as running the following command:
ng update @angular/cli @angular/core
Remember that Angular 8 is going to be released six months from now, and Angular 9 about a year from now per the Angular release schedule. Keeping up with the latest release is not only easy, it is recommended in order to get the benefits of all the improvements in terms of speed, security and bug fixes, on top of the features mentioned in this post.
Blog Post Author
Alain Chautard is a Google Developer Expert in Angular, as well as founding consultant and trainer at Angular Training where he helps development teams learn and become proficient with Angular. Read more blog posts from Alain and learn about his services at https://blog.angulartraining.com.