What’s new in Angular 7?

If you are a technology enthusiast you would definitely be waiting for the 7^th version of Angular. The wait is finally over as Angular 7 is now out. After Angular 6,  there have been several speculations about what’s new with Angular 7, but now we have some concrete confirmations in hand. As experts anticipated, changes are being observed across the platform. One thing where Angular 7 will impress you with on the first glance is the speed at which it updates. As compared to the previous version, this one updates in about 10-15 minutes.

Another development that makes its roll out even more exciting is the number of changes it brings along the core framework, Angular material as well as the CLI. While we will discuss some of the new and awaited features in detail, we can say without a doubt that Angular 7 will definitely generate more buzz in the days to come. Wouldn’t you agree?

CLI Prompts

One of the most fascinating features that come along with Angular 7 is the CLI prompts. While it was already powerful, CLI now has the ability to actually prompt developers to augment their performance. This simply means that when users use commands like ngnew or ngadd, etc CLI will prompt users to discover and explore built-in features like routing and SCSS support. What this will ensure is that the use of common commands becomes more productive and insightful for the users. Exciting much? that’s not all. CLI Prompts have also been integrated with schematics, making it all the more useful.

Angular Material

With a number of changes, Angular material has donned a new face with minor updates. The picture begins with a brand new homepage that is more useful for the users. Design guidance, development components, tooling and latest news, can now all be found on the new homepage.

While these changes may appear minor as compared to the transformation of angular material in 2018, yet they will affect the overall feel. If you have been using Angular for some time now, you will observe slight visual differences in the 7^th version.

Virtual Scrolling and Drag and Drop with CDK

This can definitely be termed as one of the most awaited features of Angular 7. If you have been following the updates, you would be having faint ideas about what it is. Confirming all speculations, CDK now comes with virtual scrolling. Accessing scrolling capabilities is through an import from the scrolling module. If you are confused about what virtual scrolling is, just understand it as the loading or unloading of DOM elements. This process generally takes place taking into account the user position in a list of items. The virtual scroll will augment user experience by increasing the speed manifold while working with large scrollable lists. Scrolling lists just got faster.

Another amazing one from the Angular 7 new features list is CDK with drag and drop. Like virtual scroll, drag and drop can be imported from the dragdropmodule. There are some specific functions that this capability will perform. Firstly, the as a user will move items, it will ensure automatic rendering. Secondly, it will also bring about helper methods to facilitate the transferring or reordering of lists.

Application Performance

The coming in of angular 7 new features will invariably improve the application performance. After in depth review of user performance, the angular team came to an important conclusion. It was observed that as a common mistake, developers were using the reflect-metadata polyfill in production, whereas its utility is only in development. As a remedial exercise, Angular v7 will automatically remove this functionality from the polyfills.ts file to ensure that it is removed from the polyfills during production build by default. Alternatively, it will appear as a build step during application building in JIT mode.

Other updates are also a part of the what’s new in Angular 7 package. One of them comes in form of Bundle Budgets. This update will prompt new applications to warn the developers in case an initial bundle is more than 2MB and will display an error when it reaches beyond 5 MB. While these are the default settings, developers can easily customize their budget settings to suit their projects.

Angular Elements

Angular elements will now support content projection using web standards for custom elements. While this may seem to be a small update to many, only the ones who follow Angular aggressively will understand its true utility.

Improves Accessibility of Selects

When it comes to application development, developers are often most concerned about the accessibility. Angular v7 now comes with capabilities to improve the accessibility of an application. Application accessibility can be augmented by using the native select element inside of a mat-form-field. The combination of native select and mat select is an effective one. Each brings about an advantage to v7. The former brings performance, accessibility and usability advantages to the table. The latter ensures full control of the presentation of options.

Partner launches

As the Angular team rolled out its v7, it also attributed its success to a number of partners and the community at large. While it talked about the new capabilities and Angular 7 new features, it also talked about the community projects which launched in partnership with Angular.

The talk began with Angular console which is a downloadable console for developers. It will allow users to start and run angular projects in their respective machines.

The second in discussion was @angular/fire. AngularFire has its first stable release for Angular with a new home in npm.

The next in line talked about partner launch was the introduction of NativeScript. Have you ever wanted a single project that builds for both the web as well as the mobile? Well your wish has come true. With NativeScript, building for different platforms is now possible.

Finally, there has been much buzz about StackBlitz. Angular v7 has brought along the second version of StackBlitz or StackBlitz 2.0. As expected, it includes Angular Language Service. But that’s not all; it comes with several interesting features like tabbed editing to name one.

Ivy

While this blog is more about the new features of Angular v7, this particular feature, Ivy, which is still underway, deserves attention. According to the Angular team, Ivy is their next generation rendering pipeline which will positively impact the future of Angular. As of now, the backward compatibility of Ivy is under process with existing applications. Nonetheless, the team is quite optimistic about releasing a version for the early adopters in the coming months.

In a nutshell, what’s new in Angular 7 can be beautifully summed up in one phrase, A LOT. There are changes and updates along with all verticals and each one will have an impact on its overall appeal. Right from performance enhancements to new utility features like virtual scroll and drag and drop, there are efforts to enhance the whole user experience. With some updates already in place and some like Ivy on their way, Angular v7 is definitely creating an impact on the entire tech ecosystem. Therefore, Angular developers aiming to strive high must accustom themselves to these changes and updates. If there is some exciting feature of Angular v7 that you find to be extremely useful, do share with us.

The post What’s new in angular version 7? Virtual Scroll, CLI Prompts and more appeared first on Recro | Blog.