New Features in Angular7

Angular is one of the most popular frameworks for making a web application and with the release of Angular 7, it has been given some more powerful features. Let’s dive into it and explore some new features introduced in Angular 7.

A New ng-compiler

Angular 7 added a new compiler called the Angular Compatibility Compiler (ngcc).

The new compiler is capable of excellent 8-phase rotating ahead-of-time (AOT) compilation. Most Angular applications can expect a massive reduction (95-99%) in bundle sizes. When the actual size of the Angular bundle becomes less than what most languages would take to store the string 'Angular,' you know it’s significant progress.

The ngcc Angularnode_module compatibility compiler is a tool which “upgrades” thenode_module compiled with non-ivy ngc into the ivy compliant format.

CLI Prompt

With CLI capability, the Angular CLI can prompts users to help them make decisions. The ng new capability asks if users want to add routing and SCSS, i.e. what type of styles to use, while ng add @angular/material asks users what theme they want and if they want gestures or animations.

You can install the latest version of the CLI globally:

npm install -g @angular/cli@latest

Angular Material CDK (Component Dev Kit)

Angular 7 features visual improvements in Material Design 2018, such as refresh and virtual scrolling for dynamically loading and unloading parts of the DOM to build high-performing, large lists of data. Also, applications can be fitted with drag-and-drop capability.

ScrollingModule

As many mobile frameworks have started to make the move towards dynamically loading data such as images or long lists, Angular has followed suit by adding the ScrollingModuleto allow for virtual scrolling. As elements gain or lose visibility, they are virtually loaded and unloaded from the DOM.

DragDropModule

We can easily create interfaces using the @angular/cdk/drag-drop module 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 helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).

Angular Do-Bootstrap

In the past, Angular has used for bootstrapping modules that need to bootstrap a component. Angular 7 added a new life-cycle hook (ngDoBootstrap) and interface (DoBootstrap).

Example:

class AppModule implements DoBootstrap {
  ngDoBootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent);
} 
}

Application Performance

Angular 7 comes with powerful performance which leads to faster upgrade speeds and the framework itself becomes faster as well. The Angular team has discovered that many developers included the reflect-metadata polyfill in the production. So that is only needed in the development and not in production. So they decided that to fix this, part of the update to v7 will automatically remove it from your polyfills.ts file, and then include it as a build step when building your application in JIT mode. So lifting this polyfill from production builds by default.

Updated Dependencies in Angular 7

Angular 7 comes with support for various upgrades in dependencies.

1: Typescript 3.1: Angular 7 have updated TypeScript version from 2.7 to 3.1 which is its the latest release. Its compulsory to use TypeScript’s latest version while working with Angular 7.

2: RxJs 6.3: The latest version of RxJs (version 6.3.3) was added in Angular 7, bringing with it new, exciting additions and changes.

3: Support for Node v10: Angular 7 now supports Node V10 with backward compatibility, as well.

You can easily update your @angular cli/core and also update your Angular Material instance, using the below commands:

$ ng update @angular/cli @angular/core

$ ng update @angular/material

Conclusion

To sump up all the above features, Angular 7 looks like a much more accessible solution focused on the modern technological trends, with added features like virtual scrolling, drag-and-drop, Angular Material, and many more.

Thanks for reading!