The angular framework is very often used for application development. Angular 7 is the latest version of Angular. The stable version was released in the third quarter of 2018.
The Angular 7 emerges as a major release because it almost covers the entire angular platform. This version is smaller, faster and very easy to upgrade.
If you are using Angular 6 then you would need to run the following command -
ng update @angular/cli @angular/core
More details related to upgrades can be accessed through the angular official website.
The new features in Angular 7 include CLI prompt, virtual scrolling, drag and drop, bundle budget, application performance, accessibility of selects, angular elements and partner launches. Virtual scrolling and Drag and drop are a part of the Component Development Kit (CDK) of the Angular Material.
Now let us understand these features in detail –
-
CLI PROMPT
The CLI prompt functionality means that the user will get two prompts. One would be if he would like to use Angular routing. The other would be regarding which styles sheets he would like to use. The developer may select amongst any of these four style sheets namely CSS, SCSS, SASS, LESS, or Stylus.
The CLI prompts are supported by Schematics and the user can customize them which makes it user-friendly. -
VIRTUAL SCROLLING
The feature of scrolling was there in the Angular 6 version. However, virtual scrolling is a feature added in the Angular 7 version. This feature allows the user to bind a long list of elements into small packets. The data would be rendered into the packets in accordance with the scroll movement at the user end.
This feature is particularly very useful when building mobile apps where scrolling a long list of data can affect performance. Nevertheless, it helps in improving the performance of the mobile as well as the web applications because even web applications may tend to slow down because of long lists. -
DRAG & DROP
It allows the user to re-order a list by dragging and dropping the items from the list. Besides this, the user can transfer items between the lists.
The user can also customize the drag area with the help of a cdk drag handle. A user may also apply multiple handles on a single item. The user can also create a preview image for every item.
The drag and drop movement can also be restricted along an axis. This means that the item may move along the X axis or the Y axis as per the user’s command. -
BUNDLE BUDGET
This functionality allows the developers to set up a budget limit of their bundle size when developing applications on Angular 7. So now users can set and check their own bundle size.
The bundle budget has a default setting of 2 MB as the lower limit and 5 MB as the higher limit. If your bundles are smaller than 2MB or larger than 5 MB, it will give you a warning. The developer can also change these settings. This results in a faster application as the bundle size gets reduced. -
APPLICATION PERFORMANCE BY REMOVING REFLECT METADATA POLYFILL
The reflect metadata polyfill production is only used in development. So in version 7, it has been eliminated from the polyfill.ts file and it automatically adds up later while building the application in JIT mode.
So the reflect metadata ends up being used only during the development and is not there in the production mode. This results in smaller data size and a faster application. -
IMPROVEMENT INACCESSIBILITY OF SELECTS
Earlier the mat form field was only using the select option in which the application used to slow down in events of large data. But now, the native select has been introduced to the mat form field which makes the application faster.
Basic native select is faster than basic mat select because the data loads faster. There is also an option to disable both mat select and native select. Besides that, there is an option to reset the select value in both the fields. -
ANGULAR ELEMENTS
It is a part of the Angular framework and was introduced in Angular 6 version. However, in the updated version 7, it will have an added functionality to project content using web custom elements. -
PARTNER LAUNCHES
The Angular 7 comes with major partner launches which include Angular Console, Native script and Stackblitz as explained below - -
ANGULAR CONSOLE
It is the user interface of Angular CLI and also provides a project overview to the developers. All those commands that the user was running on CLI, now can run on the console. It eliminates the need to write commands on the CLI terminal.
A user need not open a CLI terminal because now he can simply create, build, test and run projects using the console. Users can download angular console on a local machine and start building angular applications. It is available for Windows, Mac and Linux operating systems. -
NATIVESCRIPT
It allows the user to build a web and mobile app through a single project. Earlier the developers had to create separate projects for web and mobile versions of the application. The Angular and Native script teams collaborated to create a native script schematics collection that would enable this functionality.
The codes for the web and mobile apps in a single project will be maintained in such a way that the shareable portions can be kept at one place and non-shareable ones can be created separately. -
STACKBLITZ
The Stackblitz 2.0 including the Angular Language service has been launched. It provides an important feature called tabbed editing which means that now the developers can open multiple tabs and work on them.
Now that we have understood the new features of Angular 7, let us go ahead and enlist the dependency and the documentation updates - -
DEPENDENCY UPDATES
Version 7 supports Typescript 3.1, RxJS 6.3 and Node 10. It will be compulsory to use Typescript with this version. Besides supporting the node version 10, Angular 7 will continue to support the earlier node version 8. -
DOCUMENTATION UPDATES
When you go to the docs section in the official website of Angular, you will see a new section called CLI commands. Earlier, the developers had to search for the command references on google but now Angular has given all those CLI command references on their official website.
If you are new here and doesn't know that from where you need to start learning to code then click here.