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"
    }
  ]