Let’s see what the latest version of the framework has in store for us!
Angular 7 Updates
reflect-metadata Automatically Removed for Production Builds
Angular 7 will automatically remove the polyfill reflect-metadata when compiling an Angular web app for production. It is apparently only needed for development/JIT mode.
The Angular team is saving us a bit of work by having the compilation step take care of this.
New projects will have a warning limit set to 2MB and an error limit set at 5MB.
Virtual Scrolling for Fast List Scrolling
One thing that excited me about the swimlane/ngx-datatable library was that it included virtual scrolling. It enables scrolling of a list without creating every single element in the DOM. Only the elements that are visible to the user are displayed.
React and React Native also have virtual scrolling built-in. It’s great to see Angular 7 including this by default.
Angular 6 Updates
And if you missed it, Angular 6 added a few new things too.
Upgrade Packages with ng update
You can now use the following command in the Angular CLI to upgrade Angular modules properly:
By properly I mean that it will upgrade things like RxJS and TypeScript and other framework dependencies to the latest versions based on the version of Angular that you are running. Makes it a bit easier to manage dependencies, and 3rd-party libraries and modules can hook into this too using something called schematics.
Add New Packages with ng add
Even cooler for me is that the framework is being proactive not only about updating and upgrading packages, but about adding them.
You can install a package using the following command:
And an installation script will be executed! That means, for example, when you run the following:
ng add @angular/pwa
Then the Angular CLI will also create an app manifest file and a service worker file so that your PWA (Progressive Web App) is ready to go.
Angular Material Updates
Angular 6 had a lot of updates for the Material design package. They added “starter” components like the side navigation and dashboard. The side navigation contains a toolbar component and a list of menu items. The dashboard component displays a grid of card components for displaying various stats, as you are likely to do on an admin dashboard.
Funny enough, since I mentioned swimlane/ngx-datatable, version 6 actually includes a data table component as part of the update to Material. It can show a table of data pulled in from a data source and comes with sorting and pagination.
Click here to read more about Angular 6 updates.