5 Important New Features of Angular 7

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. Be sure to download our Angular 7 Cheat Sheet as well! 

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:

Angular CLI prompts

Angular Console

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

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:

Default Build Budgets

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:

Drag and drop support in CDK

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:

Virtual scroll support in CDK

Here again the API is fairly straightforward, and just a few lines of code are needed:

Virtual scroll support in CDK

Conclusion

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.


About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.