Angular, the most used front-end framework for the development of desktop applications and mobile applications. It has gained its popularity due to rich features like modular development and component isolation. Systematic and timely updates of angular along with awesome support from the angular team add to its popularity. Now the latest LTS version, Angular 7 is here. With its latest release, it has bought some awesome features and improvements and is highlighted in this post. Also, some simple techniques to upgrade the current project to latest version.
1. Performance of the application
The angular team found that developers were using the reflect metadata polyfill in prod mode which is only required in dev mode. As a solution to this, Angular 7 includes it as a build step while building the application and removing it from polyfills.ts when taking build is production mode and it happens by default. It increases the performance and furthermore, there is a warning shown when the bundle size is greater than 2 MB and error occurs at 5 MB. It can easily be changed from the angular.json file.
”budgets”: [
{
”type”: ”initial”,
”maximumWarning”: ”2mb”,
”maximumError”: ”5mb”
}
]
Also, bundle size can be easily checked by running an ‘ng serve’.
2. Changes in Angular CLI
With the new version of angular CLI v7.0.2, it will prompt users about routing and which stylesheets the user prefers while typing common commands like ng-new or ng-add.
3. Virtual scroll
Cdk comes with a virtual scroll in the seventh version. We can use it by importing the Scrolling Module. It includes loading and unloading of DOM elements from the list of items. We can populate huge scrollable lists with fast experience.
<cdk-virtual-scroll-viewport itemSize=”50” class=”example-viewport”>
<div *cdkVirtualFor=”let item of items” class=”example-item”>{{item}}</div>
</cdk-virtual-scroll-viewport>
4. Drag & Drop
Cdk also supports drag and drop. Developers can now easily build drag and drop interfaces. Now with this, it is possible to sort within a list, drag, transfer items between the list, etc. Methods like moveItemInArray and transferArrayItem help in reordering and transferring items in the same list.
5. Angular Material
Now, material.io is the homepage of the newly installed angular app where we can get guidance on tooling, development, etc. Accessibility for selects is improved. We can use select directly inside mat-form-field, using native element always improves the performance. Now it is possible to use both.
6. Improved Error handling
Angular 7 throws an error for @Output if not initialized.
There are some prerequisites for Angular 7
Compatibility :
- Typescript 3.1
- RxJS
Angular 7 works with Node versions 8 and 10.
If all these dependencies are present we can easily update to angular 7
Check Lists
- If using HttpModule and Http service, change to HttpClientModule and HttpClient
- Remove the older RXJS version and install the latest.
Running update @angular/cli @angular/core in a terminal of CLI, to update to 7th version of angular.
Use update.angular.io to get step by step instructions about angular versioning. Therefore, if you’re planning to implement Angular in your own project, whether mobile or web, we recommend you contact us to develop a well-versed framework.
Author bio:
Sharon James: Sharon is a web developer who does what she loves the most – coding and learning new technologies. Her hobbies include traveling, painting and socializing.
