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.
How to update to version 7?
ng update @angular/cli @angular/core
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. Developers have stated that this update is fastest, and most apps take less than 10 minutes to get update.
CLI Prompts
In the latest release team have noted that the CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.
CLI Prompts have been added to schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.
"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
Application Performance
Angular Team is more focusing on performance, and they have 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.
To fix this, part of the update to v7 will automatically remove this from your polyfills.ts file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.
Angular Material & the CDK
This is the best part of 2018 Angular releases. Some most useful and amazing feature introduced with v7 are:
Virtual Scrolling
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.
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
(Ref: Angular Blog)
Drag and Drop
(Ref: Angular Blog)
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).
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
Some more highlighting features are:
- Improved Accessibility of Selects
- Angular Elements
- Partner Launches
Click here to read detailed about Angular v7 on official angular blog
Credits: Angular Blog
Explore our Angular section to read more articles on Angular
I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs