What is New in Angular v7

 A couple of days ago Angular Team has officially released version 7 of Angular. In this release Angular mainly focused on the entire platform, including the performance of the core framework, Angular Material, and the CLI with synchronized major versions. Before going to changes in v7 let's see how to update the angular version in existing project... 

How to update to v7

you can follow the link https://update.angular.io/ for detailed information and guidelines on updating your application. Or if you want to update your v6 project to v7 just run the below command...

ng update @angular/cli @angular/core

Now let's go through what's new in the v7...

CLI prompts

Now in CLI prompt when user run something like ng new or ng add @angular/material. it will help you to discover built-in features like routing or SCSS support.

The user can take advantage of that by adding prompt in schemantic.json on 'x-prompt' key for particular schematics collection.

//schematics.json

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},

Application performance

• In the earlier version of angular user faced reflect-metadata polyfill in production that is only needed in development. So in the new update, the polyfill.ts file in the production build and automatically added in development.

• In new updates Angular also providing the bundle budgets in CLI. By default, the application will warn when initial bundle size more than 2 MB and will show error when bundle size more than 5 MB. Angular also given customization setting for this in the angular.json file.

//angular.json

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

Virtual Scrolling

Another great functionality Angular launch in version 7 is Virtual scrolling. It provides the flexibility of loading and unloading dom elements that are only visible on the screen. that's mean the functionality only render that elements in the dom that are fit on the screen. It will be more useful where the large data set renders in the dom elements and creates a performance issue while showing the data. But virtual scrolling makes it possible to build very fast experiences for users with large scrollable lists.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Drag and Drop

The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition to horizontal lists and locking along an axis.moveItemInArray helper methods for reordering lists and transferArrayItem for transferring items between lists.

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

 drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }

Improved Accessibility of Select

<mat-select> is a form control tag for selecting a value from options set. it's similar to the native <select> element. <mat-select> is designed to work inside of a <mat-form-field> element. 

Angular Elements

 In new update Angular now supports content projection for custom elements using web standards.

<my-custom-element>This content can be projected!</my-custom-element>