What’s New In ANGULAR 7?

How to Update?

For updating your existing Angular project to version 7,

ng update @angular/cli @angular/core

Visit update.angular.io for more information and guidance regarding the updates.

CLI prompts

The command-line interface provides more information about common commands such as ng new or ng add @ angular / material. This helps you to find built-in features like routing or support for SCSS.

The documentation of angular.io now includes documentation of Angular CLI.

Angular Material & CDK

Material design received a major update this year. You can see the design guidance, tooling, development component from Material. Some new functionality is added in CDK like virtual scrolling, Drag and Drop by importing ScrollingModule and DragDropModule.

Virtual Scrolling

The CDK now has scrolling capability which means that your loading/ unloading of DOM element is a bit faster & user-friendly. You can use that by importing ScrollingModule.

Here is how you can implement this feature in your application,

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

Drag & Drop

The CDK has now support for drag and drop which includes automatic rendering as user move items from one place to another place. Method used for reordering of lists is moveItemInArray And for transferring items is transferArrayItem.

Here is how you can implement this feature in your application,

In app.component.html file,

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
 <div class="example-box" *ngFor="let item of items" cdkDrag>{{item}}</div>
</div>

In app.component.ts file,

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

Performance Improvements

As per tradition with the release of new versions, the Angular team also took a
look at the performance of the framework for version 7. We included the reflect-metadata polyfill in production, which is only needed in development.

In version 7, as a part of update it will automatically remove a polyfills.ts file, when you are building your application in JIT(Just-In-Time) mode, removing this polyfill from production builds and makes your application smaller in size.

This next feature is warning application creators when they are going over the budget with their bundle size. The default bundle size is a warning at 2 MB and an error at 5 MB. These default bundle size can be easily changed in your angular.json file by changing the bundle size in the angular.json file.

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

Angular Element

Angular Elements components now support content projection for custom elements.

Conclusion

With Angular 7, A new major release has come out, which is having many small improvements and designed by maintaining the dependencies and other performance improvements. But Ivy still is in under development so did not become a part of this update. Many partner projects like Angular Console, NativeScript, StackBlitz, @angular/fire are continuously helping Angular to expand environment.