Angular 7: New Features Unfolded

Angular 7: New Features Unfolded

Angular 7 New Features

Angular is considered as a prominent JavaScript framework along with React and Vue.js. There are various upgrades introduced in 10 years. In 2009, the first version was announced and it was not successful as expected because of its performance and other technical concerns. Hence, Google decided to add up potential libraries to it.

Let’s bid a goodbye to angular 6 and welcome Angular 7! A bunch of key features is mentioned below.

What earmark does Angular 7 have?

CLI Prompts

User will be easily accessing commands with the help of prompts. Commands such as ng add or ng new @angular/material will help create a project when used with SASS. Also, when used x-prompt key, schematics for package publishing included by Google can be accessible.

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

view rawschematic.json hosted with 


 by GitHub

Performance of Application

Google has identified common errors present and has dedicated itself in optimizing performance. New apps are set up with exceptional budgets, that would make developers vigilant not to exceed bundle size and abide by the budget. The default warning size has been laid down at 2MB whereas errors should not exceed 5MB.

“budgets”: [{
“type”: “initial”,
“maximumWarning”: “2mb”,
“maximumError”: “5mb”

view rawangular.json hosted with 


 by GitHub

Virtual Scrolling

With the help of recently introduced CDK, one can import the scrolling module to take advantage of virtual Scrolling. Google has added acceleration when there are huge list items of a scrollable view. Alteration made in DOM can be reflected in scrolling.

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

view rawdragdrop.html hosted with 


 by GitHub

Ease of Drag and Drop

CDK supports Drag and Drop that includes robotically rendering items as the user moves along with helper methods that record a transfer of items. This can be achieved with moveIteminArray and TransferArrayItem methods.

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

view rawdragdrop.html hosted with 


 by GitHub

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

view rawdragdrop.ts hosted with 


 by GitHub

Updates in Documentation

To serve the developers in a better way, the team at Google has worked on improvising guidelines and reference materials. It also includes additional reference information for Angular CLI.

Render of Ivy

As of now, the team is currently working on this section and is not introduced with the release of Angular 7. Hence, the current status is in the deployment process.

Angular Elements

Use of web standards for custom elements angular extended its support to content projection.

<add-custom-element>This is a sample content to be projected</add-custom-element>

Updating Dependency

On major 3rd party projects dependencies are updated on
RxJS 6.3
TypeScript 3.1
With the help of single command, one can upgrade to Angular 7
$ ng update @angular/cli @angular/core


Angular 7 with a javascript framework is an enhanced and improvised solution as compared to the previous version released. The angular development team has taken a technical dive in optimizing the performance. You need to visit the official website to upgrade and follow the steps mentioned in it.

Prerequisites to be taken into consideration are,

  • You should have up to date version of Node.js.
  • Additionally, you should install Visual Studio code as well.
About SpryBit

SpryBit is a one-stop IT solution provider, specialises in developing state-of-the-art technology solutions. The company houses professional programmers, developers, designers, and creative minds who thrive to bring the best out of their skills.

Web Development
, ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Specially Thank you! for visiting.

Any Project on your Mind?

Contact us OR call us to get FREE estimate