Top Angular 7 Features
Angular 7 has many great changes, we’ll highlight the most important ones…
The new compiler provides an accelerated eight-phase compilation with the reduction of application sizes by approximately two. The new compiler is capable of advanced 8-phase rotating ahead-of-time compilation. Most applications can expect a massive reduction of 95-99% in bundle sizes.
Split of @angular/core
Given how large of a framework Angular has become you likely won’t need all of it’s libraries, modules or dependencies. Thus Angular has split @angular/core into several (over 400) separate modules thereby reducing your applications bundle size.
Most developers were including the reflect-metadata polyfill in production builds. This has been removed by default.
In version 7 the cli will now prompt the user for configurable options when using ng new or ng add.
The virtual scrolling package provides helpers for directives that react to scroll events. Virtual Scrolling enables the loading and unloading of elements from the DOM based on what is visible or not.
Drag & Drop
The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).
With Angular 7 the TypeScript dependency version has changed from 2.7 to 3.1.
Removal of ngModel
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.
<form [formGroup]="form"> <input formControlName="first" [(ngModel)]="value"> </form>
Upgrading to Angular 7
You can use the @angular/cli to upgrade for you automatically:
$ ng update @angular/core @angular/cli
Additionally, if you’re using @angular/material:
$ ng update @angular/material
Upgrading all packages
You can quickly & easily upgrade all of your packages using the npm-check-updates package:
$ npm install -g npm-check-updates $ ncu --upgrade $ npm install