Angular 7 Features And Updates

This is true Angular 7 released. It significant release that implements changes, new features, and improvements throughout the entire platform. It is released with Angular Material 7 and Angular CLI 7.Angular 7 is released with improved application performance. Angular Material 7 and CDK have new features like Virtual Scrolling, Drag and Drop. Let's see feature of Angular 7

A new ng-compiler

The new compiler is capable of excellent 8-phase rotating ahead-of-time(AOT) compilation. When the actual size of the Angular bundle becomes less than what most languages would take to store the string Angular, you know it’s significant progress.
The ngcc Angular node_module compatibility compiler – The ngcc is a tool which “upgrades” node_module compiled with non-ivy ngc into ivy compliant format. Angular Compatibility Compiler(NGCC) will convert node_modules compiled with Angular Compatibility Compiler (ngcc), into node_modules which appear to have been composed with TSC compiler transformer (ngtsc)

CLI prompts

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. And the great news, it’s customizable! Add a schematic.json using the Schematic CLI, and you can tell the Angular CLI which prompts to execute.

Angular DoBootstrap

Angular 7 added a new lifecycle hook that is called ngDoBootstrap and an interface that is called DoBootstrap.
// lifecycle hook

class AppModule implements DoBootstrap {
    ngDoBootstrap(appRef: ApplicationRef) {

Application performance

The Angular team has discovered that many developers included the reflect-metadata polyfill in the production. So that is only needed in the development and not in production. So they decided that to fix this, part of the update to v7 will automatically remove it from your polyfills.ts file, and then include it as a build step when building your application in JIT mode. So lifting this polyfill from production builds by default.

The Ivy rendering engine is a new backward-compatible Angular renderer main focused on
  • Speed Improvements
  • Size Reduction
  • Increased Flexibility
  • This Ivy Rendering feature will reduce the code size and makes compilation faster.

    The Angular 7 upgrade is faster (less than 10 minutes for many apps according to the official announcement), the framework is faster, the virtual scrolling CDK module detailed above makes apps run with better performance. New projects are also now defaulted using Budget Bundles which work to notify you when your app is reaching size limits. By default, you get warnings when you reach 2MB and errors at 5MB. And when you need a little more space, jump in your angular.json and adjust as necessary.

    The Angular Material CDK


    As many mobile frameworks have started to make a move toward dynamically loading data such as images or long lists, Angular has followed suit by adding the ScrollingModule to allow for virtual scrolling. As elements gain or lose visibility, they are virtually loaded and unloaded from the DOM. Performance is significantly increased to the user’s eyes. Next time you have a potentially large list of items for your users to scroll, stick it in a cdk-virtual-scroll-viewportcomponent and take advantage of the performance boost!


    Now you can remain entirely within the Angular Material module and implement drag and drop support including reordering lists and transferring items between lists. The CDK includes automatic rendering, drag handlers, drop handlers and even the ability to move data. Don’t like the standard drag animation? No sweat. It’s Angular; it’s yours to override.

    Ivy Renderer

    The next generation ready-when-it’s-ready renderer…still isn’t quite ready. The Angular team won’t commit to a final timeline, but the development is still active and progressing. They note backward compatibility validation is beginning and while no official team member has commented, a few fervent followers of the commits are expecting a complete beta to launch sometime during V7’s lifespan with a possible official release alongside version 8. Follow the progress yourself on the GitHub Ivy Renderer issue under the official Angular repo. The best news? They fully expect that Ivy can be released in a minor release as long as it’s fully tested and validated. So who knows? Maybe we’ll see it in v7 after all.