Google has released Angular 6 in March 2018, and now it has released the next version of angular with lot of optimum features and significant changes. Google has been integrated various new features and updates like CLI prompts, Scrolling, Drag, and Virtual and Drop with Angular 7. Let’s see the Angular 7 New Features and Updates
Angular 7 New Features
Before begin, if you want update to angularjs 7 please visit office site. And the optimum thing is that the developers have given positive reviews about the updates related to angular latest version 7, saying that it is much faster. In fact, they also opine that numerous of apps get updates in less than 10 minutes. This is something cool and amazing to note.
CLI Prompts
The CLI will be rapid the users as when they are running the common commands such as ng new or ng add @angular/material with the aim of getting aid for building a new project using SASS. Apart from that, Google has also integrated Schematics for benefiting the package publishing the Schematics. They just require adding x-prompt key to a Schematics collection. You can also install the newest update of CLI globally by the command:
npm install -g @angular/cli@latest
Once this is finished, you can begin for developing a new app. You just require to type ng new and press enter.
Application Performance
Google is committed to get better performance of the applications and so it first identified the common errors made across the ecosystem. It analyzed the truth that the developers added the reflect-metadata polyfill production, which only helps during the development process.
In order to resolve this issue and upgrade it for the variant 7, Google determined to eliminate the polyfills.ts file automatically, rather adding it as a built-up step for the creation of application in the JIT mode. The polyfill gets uninvolved from production builds by default.
Actually, Google has also taken a commendable step by setting up budgets for the new apps. The defaulting new projects would take the advantage of the Bundle Budgets in the CLI. It would build the developers cautious in case they exceed the budget with bundle size. The default warnings have been set at 2MB size and the error at 5MB.
However, the good thing is that you can modify the defaults in the angular.json file. The developers will just be have to include few things about the budget and set the preferred warning and error size.
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “2mb”,
“maximumError”: “5mb”
}
]
For getting across the volume of the bundle, you would only need to run ng serve on the Angular application.
Angular Material & the CDK
There was a main update in the Material Design this year. So, what’s the large difference from the previous version? Well, nothing as sort and you can only expect a tiny visual distinction, which emphasizes on Material Design update specifications. Really, the developers would also see minor modifications in the Material Design Refresh.
It should be noted that the freshly included CDK would receive the benefits of Virtual Scrolling and Drag and Drop. You just need to import the DragDropModule or the ScrollingModule.
Virtual Scrolling
The recently added CDK can take advantage of the Virtual Scrolling by importing Scrolling Module. If we have to describe Virtual Scrolling, then it is loading or unloading of the DOM elements based on the noticeable aspects of the list. This time around, Google has increase the speed of the huge scrollable lists.
<cdk-virtual-scroll-viewport itemSize=”20″>
<div *cdkVirtualFor=”let dog of dogsArray”>{{dog}}</div>
</cdk-virtual-scroll-viewport>
You can even develop the Angular Material’s StackBlitz to acquire along with virtual scrolling. The modification made in the DOM elements can also be viewed during the scrolling.
Drag & Drop
The Drag and Drop gets the support from CDK and contain the features like automatically rendering as the user moves items and including the helper methods for the record or transfer of items in the lists such as moveItemInArray and transferArrayItem.
Better Accessibility of Selects
The Angular team has also worked on developing the accessibility of the Selects in the application. They actually have used the native select element in the mat-form-field. The performance, accessibility, and usability of the native select became improved.
However, the team like to chose mat-select that offers comprehensive control of the presentation options.
Angular Elements
The Angular Elements will assist to project the content by using the web standards for the custom elements.
<my-custom-element>This content can be projected!</my-custom-element>
Partner Launches
As per the Angular team, one of the main factors leading to the success of the front-end development is the increasing number of the community members. Thus, it has been further looking up to associate with diverse community projects unveiled in the recent times.
- Angular Console: It is a console that you can download and start with running the Angular projects on the local machines.
- @angular/fire: It has been initiating as a new space on npm and is the initial stable release for the Angular.
- NativeScript: This feature would allow angular developers to build only one project for both the web and mobile installed with NativeScript.
- StackBlitz: Google also integrate the StackBlitz with the addition of Angular Language Service, and tabbed editing features.
Documentation Updates
The team has been constantly working on improving the guidelines and reference materials to serve the developers better. The updates correlated to documentation on angular is one such step including the reference material for the Angular CLI.
Dependency Updates
Not only the documentation updates but even the dependencies have been improved on the third-party projects. This embraces the support of TypeScript 3.1, the RxJS 6.3, and Node 10.
But suppose you have Node 8, you would continue to receive the support. As far as the newest update of TypeScript 3.1 is concerned, it is now compulsory to bump to TS 3.1 for Angular 7.
Experienced Digital Marketing professional with a demonstrated history of working in the information technology and services industry. Skilled in Search Engine Optimization (SEO), Landing Page Optimization, Adwords, Search Engine Marketing, HTML, CSS, WordPress, and Social Media Optimization (SMO). Now working with DeveloperOnRent a fast growing IT outsourcing Company
