Angular 7 – what are the new improvements and features?

At last! The wait is finally over! The latest version of Angular is out!

We have awaited this moment since weeks, but now the Angular 7 is finally here, packed with exciting new features that have been promising to make the wait worthwhile!

In fact, we, as a prominent web development company, are extra-excited about this version since it’s a major release that implements a good number of new features, changes, and performance improvements throughout the entire Angular platform.

These updates mainly include the Angular Material & CDK, performance improvements and the CLI prompts.

Now, before we dive into the details, let’s take a quick look at recent history of Angular’s versions.

History of angular’s versions

Note: If you already know the history of Angular, or if you do not wish to get into past details, please skip this part and move on to the next – Angular 7 Highlights.

As most of you already know, Angular is one of the most popular front-end JavaScript framework besides Vue.js and React. It has been around for past 10 years, and since then, it has gone through innumerable upgrades.

The first version of the framework was called AngularJS, which was launched in 2009. Though it was certainly not a perfect framework back then, mainly due to its large bundle size, performance issues, and other technical problems.

But that imperfection was the motivation behind the entire rewrite of the AngularJS.

Due to the not-at-all-perfect & failed attempt, the developers at Google decided to use really powerful libraries.

And not only that, but over time, they also added new features such as AOT (Ahead-of-Time) compiling, tree-shaking, and many other helpful features.

The next version – Angular 2 – was written in Typescript, which is a popular, typed superset of JavaScript introduced by Microsoft.

Typescript basically allowed Angular to show the errors in HTML templates. But, the main major feature which was added in the Angular 2 was a compiler that was deployed between written code and output shipped to the application.

This new compiler used to optimize the production of template-rendering, which further allowed the code to execute at the maximum speed in JVMs (JavaScript Virtual Machines).

The next version – Angular 4 – further saw view-engine enhancements and code generation reductions to build an app with less efforts and complexity.

Now, before you ask, the primary reason behind skipping the number 3 was mainly to avoid a confusion that was raised because of the misalignment of the router package’s version that was already distributed as version 3.3.0.

And within short period, they also released a minor upgrade – Angular version 4.3 – that featured HTTP Client, which is an easier-to-use library for creating HTTP requests.

After that, Angular 5 was released in November 2017, which followed the releases of Angular 2 and Angular 4 closely which were launched in September 2016 and March 2017 respectively.

The key feature of Angular 5 was the support for progressive web apps, and the main improvements included the enhancements in Material Design.

Read More: How AngularJS extends HTML?

Angular version 6 was then released in May 2018 and was mainly focused on toolchain and making it simple to migrate quickly to Angular, instead of focusing on underlying framework.

The main updates in Angular 6 were ng update, Angular Material + CDK components, CLI Workspaces, Animations Performance Improvements, ng add, and Angular elements.

And now, Google has finally released the Angular 7 on 18th October 2018. And the main updates in the latest version of Angular are highlighted below.

Angular 7 highlights

Though there are not a lot of new updates & features launched in this release, but there are certainly some useful upgrades for Angular front-end developers including improvements to Angular Material and the core framework, CLI with synchronized major versions, and upgrades to the toolchain.

The Angular 7 version is primarily focused on the Ivy project, which has been going on since past release. The Ivy project is basically rewriting the Angular compiler and runtime code to make it better, faster, and smaller.

While the Ivy is still not ready for the prime time yet, but back in April, there were a lot of rumors & fake news about Ivy as well as many other features, which are now nowhere to be seen.

Let’s also take a look at some of those fake news and rumors that was intended as an April fool joke back then.

Fake news & rumors about angular 7

Below are the biggest rumors that were shared across the web in April, mainly.

• @aiStore – This was supposed to be an artificial intelligence storage, having the capability to be backwards compatible with previously created ngrx code base.
• @angular/core splitting – An answer on Quora was responsible for spreading the rumors of @angular/core splitting package, which was supposed to reduce an app bundle size and cold start performance.
• New ng-compiler – Though we couldn’t find the original source of this rumor like the first two, but it was expected that application will have a massive reduction in overall size of bundles, shockingly between 95-99%.

These were the main fake features that were rumored in April. So, if you see them in other articles, know that they are not real. Also, please spread the word as well!

New features in angular 7

Now, without any further adieu, let’s dive into discussing the new features of Angular 7 one-by-one, and see how each of them improve the frontend development process for the better.

1. CLI prompts

In Angular 7, the CLI prompts have been updated to v7.0.2 with new features. For instance, it will now prompt users when typing commands like @angular/material, ng-new, and ng-add to help them discover the in-built SCSS support, routing, and more.

These CLI prompts, in addition, have been added to Schematics, so that all package publishing schematics can now benefit from CLI prompts.

2. Angular material & component dev kit (CDK)

The Angular 7 introduced minor visual updates & improvements in Material Design that earlier received a major update this year only.

In addition, refresh, virtual scrolling, large lists of data, dynamic loading and unloading of parts of the DOM also were the part of improvements in CDK and Angular Material.

Furthermore, the applications in Angular 7 can now also be fitted with drag-and-drop functionality by either importing ScrollingModule or DragDropModule.

3. Drag & drop

The new drag-drop module basically provides a better way to easily create drag & drop interfaces, which is backed by sorting within a list, support for free dragging, animations, custom drag handles, transferring items between lists, previews, and placeholders.

In simple terms, the Drag-and-Drop support has now been implemented in CDK and it also includes automatic rendering as the users relocates items.

4. Virtual scrolling

Like mentioned earlier, the new Virtual Scrolling in Angular 7 basically loads and unloads items from the DOM depending upon visible parts of lists, resulting into a much faster experiences for users having huge scrollable lists.

This virtual scrolling package basically provides helpers, which react to all scroll events.

Simply put, it activates a high-performant way by making the height of container element exactly same as the height of total number of remaining elements to be rendered.

This, in turn, then renders the only visible items in view, creating faster experiences for the end-users.

5. Application performance improvements

The development team at Google have always focused on the performance improvements, and while doing so, they recently found that most of the developers were using reflect-metadata in their production, which actually was only required in the development.

So, to fix this problem, they’ve made a part of Angular 7 to automatically remove this from the polyfills.ts file.

Upgrading requirements

The Upgrading process is really simple. For most Angular apps out there that are running on Angular 6 and RxJS 6, you only need to run a single command stated below to upgrade to Angular 7.

If, however, you’re using Angular Material, use following single line command and you’re good to go!

During the upgrade process, if anything seems unusual, check out the update guide to see if you need to execute any special commands.

Takeaway

All in all, the Angular 7 seems like a far better solution. The Angular development team has certainly did a great job in making the Angular platform better.

Therefore, if you’re planning to implement Angular in your own project, whether mobile or web, we recommend to hire AngularJS developer who is well-versed with the framework.

It’s an up-to-date, modern, and efficient framework to build next generation products.