{"id":3934,"date":"2018-10-19T12:37:05","date_gmt":"2018-10-19T07:07:05","guid":{"rendered":"https:\/\/code4developers.com\/?p=3934"},"modified":"2023-10-16T00:04:09","modified_gmt":"2023-10-15T18:34:09","slug":"angular-version-7-released","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-version-7-released\/","title":{"rendered":"Angular Version 7 Released"},"content":{"rendered":"

Finally, the Angular version 7 (Angular v7) is out with some awesome features. Thanks to Angular team for all the efforts, in this major release angular team is spanning the entire platform, with the core framework, Angular Material, and the CLI with corresponding key versions. This release covers new landscapes for our tool chain and has enabled several major partner launches.<\/p>\n

How to update to\u00a0version 7?<\/span><\/h3>\n
ng update @angular\/cli @angular\/core<\/pre>\n
Updating to v7 is only one command for most of the developers. If you wish to go through more detailed information visit update.angular.io<\/a>. Developers have stated that this update is fastest, and most apps take less than 10 minutes to get update.<\/p>\n
CLI Prompts<\/span><\/h3>\n
In the latest release team have noted that the CLI will now prompt users when running common commands like ng new<\/span><\/code> or ng add @angular\/material<\/span><\/code> to help you discover built-in features like routing or SCSS support.<\/p>\n
CLI Prompts have been added to schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt<\/span><\/code> key to a Schematics collection.<\/p>\n
\"routing\": {\r\n  \"type\": \"boolean\",\r\n  \"description\": \"Generates a routing module.\",\r\n  \"default\": false,\r\n  \"x-prompt\": \"Would you like to add Angular routing?\"\r\n},<\/pre>\n
Application Performance<\/span><\/h3>\n
Angular Team is more focusing on performance, and they have\u00a0 analyzed the common mistakes across the ecosystem. They discovered that many of us were including the reflect-metadata polyfill in production, which is only needed in development.<\/p>\n
To fix this, part of the update to v7 will automatically remove this from your polyfills.ts<\/code> file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.<\/p>\n
Angular Material & the\u00a0CDK<\/span><\/h3>\n
This is the best part of 2018 Angular releases. Some most useful and amazing feature introduced with v7 are:<\/p>\n
Virtual Scrolling<\/strong><\/p>\n
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.<\/p>\n
<cdk-virtual-scroll-viewport itemSize=\"50\" class=\"example-viewport\">\r\n  <div *cdkVirtualFor=\"let item of items\" class=\"example-item\">{{item}}<\/div>\r\n<\/cdk-virtual-scroll-viewport><\/pre>\n
\"Virtual<\/p>\n
(Ref: Angular Blog<\/a>)<\/p>\n
 <\/p>\n
Drag and Drop<\/strong><\/p>\n
\"Drag<\/p>\n
(Ref: Angular Blog<\/a>)<\/p>\n
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<\/code>) and transferring items between lists (transferArrayItem<\/code>).<\/p>\n
<div cdkDropList class=\"list\" (cdkDropListDropped)=\"drop($event)\">\r\n  <div class=\"box\" *ngFor=\"let movie of movies\" cdkDrag>{{movie}}<\/div>\r\n<\/div><\/pre>\n
 drop(event: CdkDragDrop<string[]>) {\r\n    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);\r\n}<\/pre>\n
Some more highlighting features are:<\/p>\n