New Features in Angular 7

Angular is one of the most popular frameworks for making a web application and with the release of Angular 7, it has given some more powerful features which will enhance our application. So let’s dive deep into it and explore some new features introduced in Angular 7.

A New ng-compiler

Angular 7 added a new compiler that is called 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 Angular node_module compatibility compiler – The ngcc is a tool which “upgrades” node_module compiled with non-ivy ngc into ivy compliant format.

CLI Prompt

With CLI capability, the Angular CLI can prompts user 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

The Angular Material CDK (Component Dev Kit)

Angular 7 features with visual improvements in Material Design 2018 refresh as well as 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 ScrollingModule to 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 @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 helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).

Angular Do-Bootstrap

It’s 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 a powerful performance of an application which leads to faster upgradation and the framework also become faster. 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

Angular7 comes with the support of various upgradation in dependencies

1: Typescript 3.1: Angular 7 have updated TypeScript version from 2.7 to 3.1 which is it’s the latest release. It’s 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) is added in Angular 7 with it new exciting additions and changes.

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

You can easily update your @angular cli/core and also update your angular material. Using below commands:

$ ng update @angular/cli @angular/core

$ ng update @angular/material

Deprecations

Few things have been deprecated in latest Angular 7 like if you were using to declare a form in your template (you don’t have to, as form also activates the NgForm directive), this selector is now deprecated and should be replaced by  .

Conclusion:

Summing up all the above features, Angular v7 looks like a much more accessible solution focused on the modern technological trends added features like bitcoin mining, virtual scrolling, drag-drop, Angular material and many more.

Thanks For Reading!!!