THE DIGITAL AGENCY FOR MEASURABLE RESULTS

Get your website and mobile app developed as it is foundation of the information age. It extends your brand to create full-fledged identity. At SpryBit, we have a strategy based working system and so we easily supports businesses of different sizes – be it global market based firms or small to medium sized businesses.

Angular 7: New Features Unfolded

Jul 05 2019

Post by: Sprybit

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 raw schematic.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 raw angular.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>
	</cdk-virtual-scroll-viewport>

view raw dragdrop.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>
	</div>

view raw dragdrop.html hosted with

by GitHub

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

view raw dragdrop.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
Node-10
With the help of single command, one can upgrade to Angular 7
$ ng update @angular/cli @angular/core

Conclusion

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.

Looking for AngularJS Web Application Development? Our skilled professionals will help you with your projects!

THE DIGITAL AGENCY FOR MEASURABLE RESULTS