An Overview Of Angular 7

Introduction
Angular became one of the most popular frameworks for the development of any web application. Angular 7 also introduced some new features like Angular material, synchronization of CLI with major versions with toolchain etc. Angular 7 actually focused on rewriting the compiler and runtime code to make it much faster.

Prerequisites
Before reading this blog one must have set the environment of angular in the system along with this one must be required to have prior knowledge of earlier versions of angular, typescript, ECMAScript.

Let's have a quick overview of the new features of angular 7 :-

CLI Prompts
When we usually create a new project in angular 6 or earlier versions by using command ng new project-name then CLI starts executing the command returns output and immediately starts creating the project but now Angular 7 introduced a new feature CLI prompt in which when we use the command to create new project then CLI immediately prompts some questions regarding the routing and stylesheet formats before completing the project creation. This is the new feature which enables the user to enter their own choice for the project.

Angular material & CDK
Angular 7 is now updated to have some new feature like-

- Virtual scroll

- Drag and Drop

A  virtual scroll is an excellent feature of Angular 7 which is used for loading unloading of DOM dynamically as the user scrolls down. This feature is helpful when we have a long list of data in order to improve the performance of an application with better user interfaces experiences. This feature of Angular loads data dynamically when the user actually in need of that data. One good example of a virtual scroll is any select box which has a large list of data and this loads when the user scrolls down. 

Drag and drop is another new feature of Angular 7. Angular module @angular/cdk/drag-drop provides us an easy way to create interfaces with drag and drop with free dragging support, transferring items, sorting of the list, new drag handlers, animations etc.

Dependency updates in Angular 7
Angular 7 has updated the typescript version from 2.7 to 3.1 which is the latest version of typescript and it is compulsory in Angular 7 to work with the latest version of typescript. Angular 7 has added the latest version of RxJs(version 6.3.3) with some changes in it.  These changes will improve the performance of the app to make it much more compatible. Angular 7 now support node version 10 with backward compatibility to get the benefit of some new features of the node like improved Http, improvements in error handling etc.

New ng-compiler
Angular 7 has introduced a new compiler which reduces the size of a large app two times. This compiler introduced eight phase compilation which will result in the great reduction in the size of the app.

Application performance
The development team of Angular always focused on the improvement of performance of any application. Then they recently found that in production developers are always including reflect-metadata polyfill which is only required in the development phase so they have automatically removed it from the polyfills.ts file. Then to speed up the performance application will warn when the size of the bundle is more than 2 MB and results in an error on 5 MB which can be modified from angular.json file.

Depreciation
We use <ngForm> selector to declare the form for our template so Angular 7 has depreciated this by replacing this selector to <ng-form> now.

Update to Angular7

- Update angular cli

          $ ng update @angular/cli
          $ ng update @angular/core      
        

- Update Angular material

         $ ng update @angular/material  

Summary
Angular 7 is an upgraded and much efficient solution to create web and mobile based applications by using new features like Angular material, virtual scrolling, drag and drop etc with a proper bundle size and an amazing user interface.