Google Released Angular 7: Let’s Get the New Features and Updates

It was the spring of 2018 when Google released the previous version of the front-end JavaScript framework Angular 6 in the month of March. And as the season has reversed, and the year 2018 is about to bid goodbye, we are welcoming Angular 7 in the month of October during the autumn.

Yes, the news is confirmed and the next version has already arrived with many changes, significant updates, and new features. However, the buzz this time around is mainly on the improvements in the platforms with focus on Angular Material 7 and Angular CLI 7.

Google also included a few new features such as CLI prompts, Scrolling, Drag, and Virtual and Drop etc. for the tool chain.

Therefore, you must be excited to know what’s new on the roll with Angular 7. So, without any further delay let’s view the viable changes.

Well, before beginning let this be informed that if you want to update to Angular 7, you need to visit the official website, where all the information and guidelines related to the updates are given. However, if you are using the version 6, then running the following command will do your job.

ng update @angular/cli @angular/core

And the best thing is that the developers have given positive reviews about the updates related to version 7, saying that it is much quicker. In fact, they also opine that many apps get updates in less than 10 minutes. This is something cool and amazing to note.

CLI Prompts

The CLI will be prompting the users as when they are running the common commands such as ng new or ng add @angular/material with the intend of getting aid for building a new project using SASS. Apart from that, Google has also included Schematics for benefiting the package publishing the Schematics. They just need to add x-prompt key to a Schematics collection. You can also install the latest update of CLI globally by the command:

`npm install -g @angular/cli@latest`

Once this is completed, you can go for developing a new app. You just need to type ng new and press enter.

Application Performance

Google is committed to improving the performance of the applications and so it first identified the common errors made across the ecosystem. It analyzed the fact that the developers added the reflect-metadata polyfill production, which only helps during the development process.

In order to solve this issue and upgrade it for the variant 7, Google decided 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 removed from production builds by default.

In fact, Google has also taken a commendable step by setting up budgets for the new apps. The defaulting new projects would take the benefit of the Bundle Budgets in the CLI. It would make the developers cautious in case they exceed the budget with bundle size. The default warning has been set at 2MB size and the error at 5MB.

However, the good thing is that you can change the defaults in the angular.json file. The developers will just be required 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 size of the bundle, you would only require to run ng serve on the Angular application.

Angular Material & the CDK

There was a major update in the Material Design this year. So, what’s the big difference from the previous version? Well, nothing as sort and you can only expect a small visual distinction, which emphasizes on Material Design update specifications. In fact, the developers would also see minor modifications in the Material Design Refresh.

It must be noted that the freshly included CDK would receive the benefits of Virtual Scrolling and Drag and Drop. You just have to import the DragDropModule or the ScrollingModule.

Virtual Scrolling

The newly added CDK can take advantage of the Virtual Scrolling by importing ScrollingModule. If we have to define 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 accelerated the speed of the huge scrollable lists.

<cdk-virtual-scroll-viewport itemSize="20">
<div *cdkVirtualFor="let dog of dogsArray"></div>
</cdk-virtual-scroll-viewport>

You can even develop the Angular Material’s StackBlitz to get along with virtual scrolling. The changes made in the DOM elements can also be viewed during the scrolling.

Drag & Drop

The Drag and Drop gets the support from CDK and includes 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.

You can read more about Drag and Drop by visiting this link.

Better Accessibility of Selects

The Angular team has also worked on improving the accessibility of the Selects in the application. They have used the native select element in the mat-form-field. The performance, accessibility, and usability of the native select became better.

However, the team rather chose mat-select that offers comprehensive control of the presentation options.

Angular Elements

The Angular Elements will help 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

According to the Angular team, one of the major 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 various community projects unveiled in the recent times.

• Angular Console: It is a console that you can download and begin with running the Angular projects on the local machines.
• @angular/fire: It has been introduced as a new space on npm and is the initial stable release for the Angular.
• NativeScript: This feature would allow angular developers to create only one project for both the web and mobile installed with NativeScript.
• StackBlitz: Google also launched the StackBlitz with the addition of Angular Language Service, and tabbed editing features.

Documentation Updates

The team has been continuously working on improving the guidelines and reference materials to serve the developers better. The updates related 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 upgraded on the third-party projects. This includes the support of TypeScript 3.1, the RxJS 6.3, and Node 10.

But if you have Node 8, you would continue to receive the support. As far as the latest update of TypeScript 3.1 is concerned, it is now compulsory to bump to TS 3.1 for Angular 7.

Ivy Renderer

According to the official information, Angular’s new project and the next gen rendering pipeline Ivy, hasn’t been introduced with the release of Angular 7 as the team is still working on it. The current status is that it is under the active deployment process.

The backward compatibility of the application has stated and it soon we would get the opt-in preview of Ivy, once it’s ready for launch.

Google Released Angular 7: Let’s Get the New Features and Updates posted first on https://thetruthspyblog.blogspot.com