New in Agnular 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"
}
]