Overview
In this post, we are going to review the new features of Angular 7.0. In this release, these features like Core framework, Angular Material and CLI has been upgraded. There is lot of improvement in application performance.
Some of the new features of Angular 7 are Virtual Scrolling, Drag & Drop and CLI Prompts.
How to update to Angular 7.0
Developers can use this command to update their old version of Angular to version 7.0.
ng update @angular/cli @angular/core
This command will be more than previous commands to update the Angular applications.
Now, let’s take a quick look at new features of Angular 7.0
Virtual Scrolling
Now, Angular application can load and unload the elements from the DOM with the help of Virtual Scrolling, which is awesome experience for users for long lists of items. Check out more about Virtual Scrolling
Drag & Drop
Now, user can Drag & Drop the elements with the help of Drag & Drop SDK. The @angular/cdk/drag-drop module provide you a way to drag & drop the elements. Check out more about Drag & Drop
CLI Prompts
The CLI will prompt the user to discover built-in features like routing or SCSS support by running the commands like ng new or ng add @angular/material.
TypeScript 3.1 support
Angular 7.0 is now supporting TypeScript 3.1 version, which is the latest version. You can check out the Microsoft blog to read more about TypeScript 3.1
Application Performance
Angular 7.0 focus more on application performance. Earlier, some developers were including reflect-metadata polyfill in production, which is only required in development.
To fix this problem, v7 will automatically remove this from your polyfills.ts file, and then include it as a build step when you are building your application in JIT mode, removing this polyfill from production builds by default.
With this Angular 7.0 version, new projects will take advantages of Bundle Budgets in CLI by default. There will be a warning if new application has initial bundle more than 2MB, and an error on more than 5MB. You can easily change these budgets in your angular.json file.
“budgets”: [{
“type”: “initial”,
“maximumWarning”: “2mb”,
“maximumError”: “5mb”
}]
Support
Angular 7.0 now supports following:
- TypeScript 3.1
- RxJS 6.3
- Node 10
Angular Material & SDK
There has been a big update in Material Design in 2018. Angular Material users updating to v7 should expect minor visual differences reflecting the updates to the Material Design specification.
Angular Elements
Angular elements can now supports content projection using web standards for custom elements.
Deprecations
<ngForm> selector is deprecated and now replaced with <ng-form>.
Summary
In this blog, we learned about new features of Angular 7.0. What new features has been added, what features has been updated and deprecated in Angular 7.0.
Read more:
