So what’s New in Angular v7?
A quick overview of new features in the newest Angular Update and some juice about Ivy…
Angular, Google’s javascript (typescript) framework for building web applications, mobile or desktop with over 42,000 ⭐️ on github. Maintained by the Angular Team at Google and a host of community members and organizations, Angular Version 7 was released few weeks ago. In this article, we shall take an overview of the new features in the version 7, changes and updates available for use now.
Spoiler Alert: Ivy was not released with Angular version 7. The Angular team at Google is holding back Ivy right now and waiting until all the breaking changes are eliminated.
This new release seems to have touched almost all the parts that make up Angular platform including Angular core, Angular Material, Angular CLI, documentation and not forgetting partner launches.
Tip: Use Bit to share, discover and compose components to build new applications faster. It’s a great time saver and collaboration platform. Try it :)
Virtual Scrolling
For Angular Material users, in line with the new revamp of material.io the Component Developer Kit in Angular which is a set of tools that helps you implement common interaction patterns while you own your presentation style has added some more common behaviors for this new version. One of them is Virtual Scrolling!
With Virtual Scrolling, you can load elements unto the DOM and also unload elements from the DOM by the visible parts of a list, this in turn provides a great platform for building cooler and faster user experience with large scrollable lists.
Drag and Drop
The second awesome addition to the Component Developer Kit in Angular 7 is Drag and Drop Feature. This is one of my favorite CDK features of version 7, it provides for automatic rendering of items in the user interface as the items are moved, also for reordering and transfering items between lists. This is really great for use cases like drag and drop to-do-lists or like team projects boards user interface.
Support for Typescript 3.1
Yes! you read right, the latest release of typescript which is version 3.1 is supported by Angular 7. Angular Developers know it would feel so good to finally use a very recent version of Typescript along with a new Angular version (we haven’t had that in a while) as we always used to lag behind in the past. Angular 6 used typescript 2.9 so this is pretty impressive.
Support for RxJS 6.3
Another core dependency change in this Angular version 7 is RxJS, this would likely not cause any headaches because we were already using RxJS version 6 with Angular 6.
Support for Node 10
This new version of Angular ships with support for the newest version of Node, version 10. Do not fret as the previous version, version 8 is still very much supported by Angular.
Angular Elements and Slots
Angular Elements which are Angular components designed as web components that can be used alone now in Angular version 7 supports content projection using web standards for custom html element like <slot>
With this declared, using slot like this is now possible:
Setting Bundle-Size Budgets
In this new Angular version 7, efficiency of your apps were at the core of this release as you now get warnings when your bundle size is over 2MB and even goes ahead to trigger an error when your bundle size gets to 5MB. Do not be worried, you can easily adjust this default setting . Simply go to your angular.json file and you can modify it.
These budgets align with warnings that can be shown to users who use chrome and so get Chrome’s Data Saver features. You can always see your bundle size on the cli after you run ng serve.
Removing reflect-metadata Polyfill in Production
So in a bid to improve angular application performance, the Angular team at Google discovered that a couple of developers used a reflect-metadata polyfill which was originally meant for use in development in their production environment. So they removed it by default for production deployments.
Improved Accessibility of Selects
Angular Material also improved accessibility for selects which reflects in this new version of Angular . The native select can now be used inside a mat-form-field. It has more accessibility and better performance than the mat-select does. You can now choose either select or mat-select which gives you full control of the presentation of options to use as they are now both available.
CLI Prompts
If I am not mistaken, I think Vue version 3 was the first javascript framework that added support to the cli to provide a prompt-facing-easy-to-install cli procedure for starting a new project. Angular 7 ships with a similar style, the CLI will now prompt you when you run common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.
Intrestingly, CLI Prompts have also been added to Schematics, this is to help any package publishing Schematics take advantage of them by adding an x-prompt key to a Schematics collection.
Partner Launches
Angular as a product is community-centered and there are other products that have been built with or in partnership with Angular. Some of these community projects are new and some have recent updates.
- Angular fire — AngularFire has a new home on npm, and has its first stable release for Angular.
- Angular Console — A console you can easily download for starting and running Angular projects on your local machine.
- NativeScript — It is now possible to have a single project that builds for both web and installed mobile with NativeScript.
- StackBlitz — StackBlitz 2.0 has been released and it shipped with the Angular Language Service, and more features like tabbed editing.
Compilation Options
If you use Angular, you know that you can define compiler options for typescript and Angular compiler options for Angular in your tsconfig.json files.
Initially, only typescript allowed for the extension of these compiler options to other files. Now the Angular compiler is now fixed so that Angular compiler options can be defined in the base config file and also be extended in another file. The options would be merged with the one inherited config file declarations exactly as they are for typescript.
Reference Material for Angular CLI
So in this new Angular version 7, a very comprehensive reference for Angular cli has been included in the angular.io platform making a one-stop for all things angular documentation.
Updating to Version 7
Updating your angular application to the latest version is now just one command away, thanks to the team at Angular and the efficiency of the last version. Just run the command below:
ng update @angular/cli @angular/coreThis update has also been reported to be very fast, so when you update, let us know in the comments how long it took. (Shouldn’t be up to 10 minutes)
For more detailed update information, you can visit this link to get an easy-to-use all inclusive angular update application.
Here is a link to the Angular CHANGELOG
Conclusion: Ivy Renderer
The rumors are false! Angular version 7 did not ship with Ivy as we all anticipated. This is because Ivy is still under active development to validate complete backwards compatibility with all existing apps. These apps include firebase, google express and 600+ other google apps built with angular.
Ivy, the third Angular rendering pipeline (from the original renderer to the view engine to Ivy) is the next generation renderer that is focused on simplicity, speed and smallness of size. It is built following strict policies of Locality and Backwards Compatibility to provide a hack-able pipeline that is easy to use and experiment with. It will be ready with an opt-in preview in the coming months and we cannot wait to lay hands on it 😄
What is your favorite feature of Angular 7? Share below in the comments.
