Finally, we have a new major version of Angular, version 7. The reason I use the word "finally" is not just because people were waiting for the latest major release of Angular, but also because there were quite a few rumors about the features Angular 7 would offer. Especially since the April Fool's article published with the title, "Top 4 Changes Coming in Angular 7.0."

The Angular team officially announced Angular 7 just a few days back, and Angular 7 has introduced some pretty awesome features, like improvements in Angular Material, Performance improvements, and CLI improvements to name a few.

In this article:

We will see how to create Angular 7 applications with ASP.NET Core SPA template.

We will also see the features introduced with this major release.

I will demo some of the Angular Material features introduced with Angular 7.

Angular 7 With SPA Template

Let's first see how to create an Angular 7 application with ASP.NET Core SPA templates using Visual Studio 2017. There are more ways than one to create an Angular 7application with .NET Core, but let's look at this one.

Make sure you have installed Visual Studio 2017 and the latest .NET Core SDK, as well as the latest version of Node.

In this approach, we will use the Angular template with ASP .NET Core.

Before starting, let us first update our Angular CLI to version 7. For this, open the command prompt and run the command:

Drag and Drop Feature

I remember some Stack Overflow questions about this, and, personally, I wished this would be part of Material. From Angular 7 onwards, we will be able to drag and drop using Material. We can now drag items horizontally, vertically, from one list to another list, reorder the list, open draggable items, etc.

For this, we first need to add the DragDropModule into app.component.ts as below:

Virtual Scrolling

We can do virtual scrolling using Angular Material with version 7. With this, we can load and unload the DOM elements based on the display size. It will create a very fast experience for the user even if the scrolling list is huge.

For this, we first need to add the ScrollDispatchModule into app.component.ts as below:

Ability to Use Native Select in Angular Material

From Angular 7 onwards, Angular material will allow using native <select> inside a <mat-form-field>. We know that native select is powerful and, as it is a native element, native <select> has some performance, accessibility, and usability advantages over mat-select. So it would be nice to use native <select>.

Performance Improvement for Production

The Angular team noticed a common mistake where the developers were adding reflect-metadata polyfill in production, although it is only required in development.

So from Angular 7 onwards, this will be automatically removed from polyfills.ts. You can add it as a build step while running in development mode.

Bundle Budget Feature

With this, if your bundle is more than 2 MB -> you will be warned by the application, and if the bundle is more than 5 MB -> you will get an error from the application. But it is configurable, so you can change the settings from the angular.json file: