What's new in Angular 7?

Angular Elements is enabled to support content projection with the help of web standards for custom elements.

Angular Material Gets Minor Updates

Angular Material got better in the display that gives it an elegant look in the new update. Moreover, it also added a new homepage for the material, material.io. In this, you get tooling, design guidance, development components and stay up-to-date with the latest news.

If you are using an Angular Material v7 then you observe a visual difference as library make changes to itself with the updated version of the Material Design.

Better Accessibility for Selects

In the updated version, it includes a lot of new features to enhance accessibility for selects. It adds a new feature of the native select inside mat-form-field. It is far better and outperformed than the mat- select.

Both the select and mat-select are available so you can choose what you want to do.

Virtual Scrolling

The Component Dev Kit (CDK) is available in the market with the great virtual scrolling capabilities that the user can apply by importing the `ScrollingModule`!

<cdk-virtual-scroll-viewport itemSize="20"> <div *cdkVirtualFor="let dog of dogsArray"> {{dog}}</div> </cdk-virtual-scroll-viewport>

Drag & Drop

The CDK in the new update also now recommends Drag & Drop, which possess these great hallmarks:

Automated render as a user moves items

It is new feature available only in Angular 7

Helper methods for reordering/transferring items in lists

For reordering or transferring items in lists, you can use a helper method: moveItemInArray and transferArrayItem

Enhancing Application Performance

You will get enhanced application performance in Angular 7

A safeguard has come into play for the users of Angular 7

It gives a portent to new application builders when they are crossing the budget with their bundle size. The warning occurs on 2 MB whereas an error occurs over 5 MB. But you don't need to frighten. You can change the limits simply in your angular.json file. The thing you have to do is add in a bit about the warnings and error sizes with budget details.

"budgets": [ {  "type": "initial",  "maximumWarning": "2mb",  "maximumError": "5mb" } ]