Angular 7: Everything You Need to Know!

The wait is finally over! Angular has released its latest version, Angular 7. Curious about its features and updates? We have got all the big details right here!

Angular is undoubtedly one of the most popular JavaScript frameworks used to build web and mobile applications. It was released by Google in 2010 and received a warm acknowledgment from the development community. Till date, six stable versions of Angular framework are released – Angular 1 (also known as Angular JS), followed by Angular 2 and Angular 4 succeeded by Angular framework’s version 5 and 6. The release of Angular framework’s version 3 was skipped by Google as there were some issues with the modules.

The beta version of Angular 7 was released earlier this year, in the month of August. Its stable version is finally released. So what’s new in Angular 7? Let’s find out.

Angular 6 was the first major release from the Angular team this year. So, before jumping to the details of Angular 7, let’s see some of the new features that were introduced in version 6.

Key features introduced in Angular 6

Angular 6 supports some solid features such as Bazel Compiler support, TypeScript 2.7 support and more:

Bazel Compiler

Angular 6 included the support for Bazel Compiler. It is basically a build system that is used to build nearly all software at Google. The interesting thing is that this compiler only rebuilds what is necessary (since source code changes very often, it does not make sense to rebuild the entire application for every little change; instead of rebuilding the entire application, it is wise to build only the code which actually changes). This is because it uses advanced local and distributed caching, optimized dependency and parallel execution.

TypeScript 2.7 support

Angular 6 included the support for TypeScript version 2.7. With this, it was much easier for developers to code with conditional type declarations, default declarations and strict class initialization.

ng update and ng add

The sixth version introduced two major new commands, update and add, in Angular CLI. With ‘ng update’ command, project dependencies are updated to their latest versions. Similar to ng update command, the ‘ng add’ command adds and configures new libraries into a project.

Angular Elements

In the earlier versions of Angular framework, it was difficult to develop a widget or component that can be included in any existing web page. With Angular 6, it was made possible with the help of Angular Elements. This feature allowed developers to render their Angular elements as native web elements. This helped businesses to switch to the Angular framework for their Web Application Development.

<ng-template>

When Angular 4 was launched a year ago, the <template> element was depreciated. The launch of Angular 6 marked the elimination of the <template> element and introduction of <ng-template>. Despite the relative newness of the sixth version, Angular 7 will probably prove to be the biggest release of this year according to the developer community. As it will be backward compatible with the Angular 6, it will be easy to upgrade an Angular 6 app to Angular 7.

Ivy Renderer (Beta)

The Angular team introduced their 3^rd rendering engine called Ivy with the launch of Angular 6. This feature augmented the speed and decreased the size of the app. Ivy is was designed to support backward compatibility with existing renderers and focused on the speed of rendering improvement. It was under development and not a part of version 6.

What’s new in Angular 7

In the following section, we discuss the new features and bug fixes / updates introduced in Angular 7:

Key Features:

CLI Prompts

CLI Prompts is added to Schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection. Furthermore, the CLI will now prompt users when running common commands like ng new or ng add @angular/material to help discover built-in features like routing or SCSS support.

Virtual Scrolling (newly added to the CDK)

Virtual scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists.

Drag and Drop (newly added to the CDK)

Drag and drop support is now in the CDK and includes automatic rendering as the user moves items and helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).

Better Accessibility of Selects

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

Other features

• Angular Console— A downloadable console for starting and running Angular projects on your local machine
• @angular/fire— AngularFire has a new home on npm, and has its first stable release for Angular
• NativeScript— It’s now possible to have a single project that builds for both web and installed mobile with NativeScript
• StackBlitz— StackBlitz 2.0 has been released and now includes the Angular Language Service, and more features like tabbed editing
• Angular 7 is faster than its predecessors. Its upgrade is also faster (less than 10 minutes for many apps)
• App performance is improved by automatically adding/removing the reflect-metadata polyfill
• New projects are now defaulted using Budget Bundles, which works to notify when an app reaches its size limits. By default, warnings are displayed when size reaches 2MB and errors come up at 5MB.
• Angular 7 includes visual improvements from the Material Design 2018 refresh.

Key Bug Fixes / Updates:

Ivy (Beta)

Ivy is still under development and is not part of Angular 7. Angular team is busy validating the backward-compatibility with existing applications. Its been rumored that Ivy will be out in the coming months.

Bazel

In order to decide whether to build Angular code using ngc (legacy) or ngtsc (local), compile_strategy() can be used.  Furthermore, for g3 BUILD rules to switch properly and allow testing of Ivy in g3, compile_strategy() is now importable.

Core

Angular 7 has better error handling for @Output than the previous versions (if a property is not initialised).

Angular Elements

In Angular 7, Angular Elements support content projection using web standards for custom elements.

Dependency Updates

Dependencies are updated based on major 3rd party projects:

• TypeScript 3.1
• RxJS 6.3
• Node 10

Documentation Updates

The Angular team has been constantly working on improving the guidelines and reference materials to serve the developers in a better way. The updates related to documentation on Angular is one such step including the reference material for the Angular CLI.

How to update to Angular 7

Visit update.angular.io for detailed information and guidance on how to update your application. For most of the developers, updating to version 7 is just about one command. :

Early adopters of version 7 have reported that this update is faster than ever, and many apps take less than 10 minutes to update.

Go Angular!

Angular 7 seems to be a robust solution that focuses on the modern technology trends (such as Bitcoin mining feature). It is definitely going to provide developers with more power to build apps. If you are planning on implementing your own web development solution, make sure you consider Angular 7.