{"id":455,"date":"2018-11-01T12:35:01","date_gmt":"2018-11-01T12:35:01","guid":{"rendered":"http:\/\/www.ipraxa.com\/blog\/?p=455"},"modified":"2023-07-05T13:16:08","modified_gmt":"2023-07-05T13:16:08","slug":"angular-7-features-improvements","status":"publish","type":"post","link":"https:\/\/www.ipraxa.com\/blog\/angular-7-features-improvements\/","title":{"rendered":"Angular 7 – Let\u2019s Know About the New Features and Improvements"},"content":{"rendered":"

Owing to its unmatched efficiency, flexibility, and extensibility, Angular has been one of the most popular JavaScript frameworks<\/a> for developing single-page web and mobile applications. Since its release back in 2010, it has undergone\u00a0several upgrades, each of which has improved the framework in some way or another.<\/p>\n

As a recent instance, while the dust has not yet settled on the release of Angular 6<\/a>, the Angular team is back again with a new version of the framework, named Angular 7. Unlike the previous version that was mainly focused on making the framework smaller and faster, Angular 7 emphasizes primarily on improving the speed and performance of the platform.<\/p>\n

As a prominent web development company, we love to keep ourselves updated with the latest trends in web development<\/a> and therefore decided to dedicate a post about Angular 7. So without further ado, let\u2019s check out what\u2019s new and exciting in Angular 7.<\/p>\n

#CLI Prompts<\/h2>\n

The Angular team has been consistently working on improving its toolchain and the new CLI Prompts are no different. In Angular 7, the CLI responds with prompts when developers run commands such as ng new and ng add. This improvement has been brought to help developers leverage built-in features like routing, SCSS support, and more. The new CLI now even lets you select between SCSS, SASS, LESS, and Stylus.<\/p>\n

\"Angular<\/p>\n

Additionally, the Angular 7 team has also integrated CLI Prompts with Angular Schematics<\/a> so that you can create your own custom CLI prompts. All you need to is simply add a schematic.json<\/em><\/span> file containing the x-prompt<\/em><\/span> key to instruct the Angular 7 CLI to display or hide specific CLI prompts. Here is the code that you need to put in your Angular 7 schematic.json<\/em><\/span> file:<\/p>\n

\"routing\": {\n  \"type\": \"boolean\",\n  \"description\": \"Generates a routing module.\",\n  \"default\": false,\n  \"x-prompt\": \"Would you like to add Angular routing?\"\n},<\/pre>\n
#Application Performance<\/h2>\n
Since the development team<\/a> at Google has always been passionate about\u00a0improving the performance of the framework, they have introduced two major changes in Angular 7:<\/p>\n
Removal of the reflect-metadata polyfill:<\/h3>\n
After noticing a large number of developers were using reflect-metadata<\/em><\/span> polyfill in production builds, the team Google has decided to automatically remove this polyfill from the polyfills.ts<\/em><\/span> file in Angular 7. Given that the reflect-metadata<\/em><\/span> polyfill is only required in development, the file will be automatically included as a build step when you build your Angular 7 app in JIT mode.<\/p>\n
Ability to Set Budgets for New Apps:<\/h3>\n
In Angular 7, the size of a new project gets restricted through Bundle Budgets by default. As soon as your initial bundle size reaches 2MB, you start getting warnings and errors when it has a size of 5MB.<\/p>\n
Need a little more space? You can easily change these default settings to suit your Angular 7 project through the angular.json<\/em><\/span> file containing the following code:<\/p>\n
\"budgets\": [{\n  \"type\": \"initial\",\n  \"maximumWarning\": \"2mb\",\n  \"maximumError\": \"5mb\"\n}]<\/pre>\n
If you\u2019re the one who uses Chrome\u2019s Data Saver<\/a> feature in Angular Application Development<\/a>, you can take advantage of Bundle Budgets to optimize network data usage of your application.<\/p>\n
\"Angular<\/p>\n
#Minor Updates to Angular Material<\/h2>\n
In an attempt to align with the updated specification of Material Design<\/a>, the Angular 7 introduces minor visual improvements in Angular Material. If you are an avid Angular Material<\/a> user, you should notice minor visual differences reflecting the Material Design refresh in Angular 7.<\/p>\n
\"Angular<\/p>\n
Apart from that, to improve the accessibility of your application, Angular 7 allows you to use the native < select ><\/em><\/span> element inside of a < mat-form-field ><\/a><\/em><\/span> element. Where the native < select ><\/em><\/span> element plays a vital role in improving the performance, accessibility, and usability of your application, on the other hand, the\u00a0< mat-select ><\/a><\/em><\/span> element provides you full control over how you present options. Both < select ><\/em><\/span> and < mat-select ><\/em><\/span> can now be used inside of < mat-form-field ><\/em><\/span> label in Angular 7.<\/p>\n
#New Additions to the Component Dev Kit (CDK)<\/h2>\n
The Component Dev Kit, which is a part of the Angular Material library, also received some new handy features as part of Angular 7 update. The two new features that have been added to the Angular 7 CDK are:<\/p>\n
Virtual Scrolling:<\/h3>\n
Be it Facebook, Twitter, Instagram, or any other platform, the world\u2019s prominent web applications are full of lists that deal with a large amount of data. Such lists can consume a lot of memory on user\u2019s browsers unless they\u2019re well-optimized by their developers.<\/p>\n
Given that many popular mobile frameworks, like Ionic, are now taking advantage of Virtual Scrolling to dynamically load heavy data such as images or long lists, the Angular 7 team has added a new element, ScrollingModule<\/a>, to the CDK. Below is the code that you have to include in your app.html file:<\/p>\n
<cdk-virtual-scroll-viewport itemSize=\"50\" class=\"example-viewport\">\n  <div *cdkVirtualFor=\"let item of items\" class=\"example-item\">{{item}}<\/div>\n<\/cdk-virtual-scroll-viewport><\/pre>\n
\"Angular<\/p>\n
Enabling Virtual Loading and Unloading of the items from the DOM on the basis of the visible parts of a list, the ScrollingModule make the scrolling experience extremely fast for users with huge scrollable lists.<\/p>\n
Drag and Drop:<\/h3>\n
With a new DragDropModule<\/a> added to the Component Dev Kit in Angular 7, you can now easily create intuitive drag and drop interfaces backed by these nifty features:<\/p>\n