We are about a month or less for the official release of Angular 7. Today, we are going to take a closer look at what to expect in Angular 7, Angular Material and how you can try out the new version of Angular. So, without further ado.

Angular 7 and Angular CLI

First, let’s focus on features coming to both Angular 7 and Angular 7 CLI.

Updated Compiler – Angular Compatibility Compiler

We are getting an updated compiler for angular 7. This is great news because it means that you can expect to reduce your bundle size by allowing old packages to use Ivy Rendering Engine. This is a huge performance gain for most application, since smaller bundles, means less size to download and faster load times. Over the next few days, I will be experimenting on some of my projects and I will get back to you with the results. Keep in mind we are still in beta.

Improvement to Angular Schematics

As of Angular 7, Schematics will allow for interactive install of dependencies and also when creating new angular projects. For instance, when you run ng new project-name, Angular CLI will prompt you whether to add routing and which stylesheet to use. This is particularly helpful, as I forget to add those flags most of the time, and it means one less thing to worry about.

Router Improvement

In the next version of Angular, the CanLoad Interface will now have UrlSegment[] which will store URLs a user tried to navigate to and can be redirected to them later. This is especially important when you want to redirect user back after they have been authenticated. For more details, please checkout the changelog here.

Angular Material and CDK

Moving on, lets focus on Angular Material – one of my favorite UI tools for Angular. On top of lots of bug fixes and minor improvements, here are the major changes to expect:

Virtual Scroll

Virtual Scroll enables you to display a large list of items (hundreds or thousands) by only rendering the number of items on view point. There are other third-party solutions out there but it’s great to see it being officially supported by the Angular Team. This is part of Angular Component Development Kit (Angular CDK) which means you can use it with any UI framework you wish to. You can learn more about this feature here.

Drag and Drop

This is another exciting feature for Angular CDK. This module allows you to create a drag drop UI which can be used for free dragging, sorting and transferring items through a list etc. It provides a complete API for you to interact with the object being dragged with touch and mouse event detectors and locking along an axis – vertical or horizontal only dragging. You should really see it in action here.

Support for Native Select in MatFormFieldModule

While not as exciting as the above two, this is a very important development. If you wanted to add a select form field in angular material, you were required to use MatSelectModule, but as of Angular 7, Material will now support the native html select input.

<select
  matNativeControl
  placeholder="Favorite car"
  [(ngModel)]="selectedCar"
  name="car"
>
  <option value="" disabled selected></option>
  <option *ngFor="let car of cars" [value]="car.value">
    {{car.viewValue}}
  </option>
</select>

For more information, visit the beta documentation here. And finally, Angular 2 Material is being updated to the 2018 Material Design Guidelines. It is still in progress, so you might come across some visual inconsistencies, hopefully it will be done by the time its released.

Trying and Testing Angular 7

There two ways you can get into the action with Angular 7. One is a global install of Angular 7 CLI and then all projects you create will be in Angular 7. This won’t affect existing projects. I would strongly advice against this. To upgrade, you one of the following commands depending on the package manager you are using:

$ yarn global upgrade @angular/[email protected]

$ npm install -g @angular/[email protected]

And any new projects will from now onwards be created with Angular 7. The second option is to manually upgrade a single project. First, upgrade the local version of Angular CLI:

$ yarn upgrade @angular/[email protected]

$ npm update @angular/[email protected]

And then update the individual packages using ng update command: For instance, upgrading Angular Core:

$ ng update @angular/[email protected]

NB: You have to pass the exact version you want, otherwise it will install the latest stable version of Angular. The same goes for angular material.

ng update @angular/[email protected]

The last option is to dedicate a directory, where angular 7 projects will be placed. Since, a local version of Angular CLI supersedes the global one. Then all angular projects will be created using Angular 7. First, create a new project directory and then install angular cli:

$ yarn add @angular/[email protected]

$ npm install @angular/[email protected]

Remember to report any bugs you come across on github issue tracker. This will help improve Angular, Angular CLI and Angular 2 Material.