Angular 7 has arrived: An overview of all new features

Angular 7 released in October, just like it was scheduled. The new features of the framework are the update to Node 10, TypeScript 3.1 and RxJS 6.3. Unfortunately, the new Ivy Renderer is not part of this release, because not all of the features have been implemented to the satisfaction of the Angular developers. Instead, a first version will be released within the next few months, which roll out for everyone with the next big release at the very latest. The Angular platform, which consists of the CLI and Angular Material/CDK, has been further developed for this purpose. At the same time quite a lot has happened with the Angular’s partners.

Angular 7 – An overview

Whatever the case may be, a look at Angular 7 is definitely appropriate. This is the case, because Angular 7 brings some innovations by updating the library versions: From now on, for example, Angular supports Node 10 and simultaneously maintains Node 8 support. Additionally, TypeScript Release 3.1 is used and supported, so that Angular should be able to use its most important new language features. These features include, for example, the mapping of types to tuples and arrays, the declaration of properties to functions and, above all, the new “unknown” type.

We are going to take a brief look at these new features in the following part.

The new features in Angular 7

The declaration of properties on functions in TypeScript 3.1 allows the use of functions which are a bit closer to JavaScript. As in JavaScript, you can now declare properties of a function. Here is an example from the official documentation:

function readImage(path: string,
                   callback: (err: any, image: Image) => void) {
    // ...
}
 
readImage.sync = (path: string) => {
    const contents = fs.readFileSync(path);
    return decodeImageSync(contents);
}

The function `readImage` that reads an image asynchronously gets a new property `sync`, which contains a function on its own. This function reads an image, but in this example, it reads the image synchronously.

Another interesting feature is the so-called unknown type. Although this type has existed as early as TypeScript 3.0, it has only officially released in this Angular version. The unknown type is basically the type-safe counterpart of the data type any. With the data type any, TypeScript cannot make any further assumptions about the used data type and simply allows all conceivable accesses to such a declared variable. In the case of a variable declared with the data type unknown, no query is possible at first and instead all queries have to be secured by type guards.

let x: unknown;
// ...
if (typeof x === "string" || typeof x === "number") {
    x;  // string | number
}

Any other data type can be assigned to a variable of the type unknown. However, unknown can only assign to itself or to any variables:

let x: unknown;
x = 123;
x = 'fooBar';
x = [1, 2, 3];
 
let y1: any = x;
let y2: unknown = x;
let y3: object = x;  // Error
let y4: string = x;  // Error

Some of the inherent changes in the Angular framework are the new DoBootstrap interface which declares the lifecycle hook ngDoBootstrap(). With this interface, Angulars type safety is strengthened. This extension is of special relevance if you want to influence the application’s Bootstrap, such as in areas of Angular Elements.

Within a CanLoad guard, the current UrlSegment[] can now be read, and the Angular router now issues a warning if a navigation operation is not initiated from an Angular controlled area of the DOM.

Finally, the platform server package of Angular (@angular/platform-server) in version 7 requires a new dependency, Domino 2.1, a server-side DOM implementation.

Update with Angular CLI to Angular 7

In order to update to Angular 7 it’s best to also use the Angular platform. In this case, use the Angular CLI. First, the Angular CLI itself will update:

npm i -g @angular/cli

Afterwards, the update is possible per application in a simple way:

ng update @angular/cli @angular/core

Furthermore, the CLI itself offers some innovations and improvements. For example, you may notice that many applications also deliver the polyfill reflect-metadata in production, although it is actually only used for the development version of the application (more precisely for all versions of the application which are in the JIT mode). In the seventh version of the CLI, this polyfill is only added to the application during a DEV build in a separate build step.

This improvement makes the build scope and the deployed application smaller. In order to keep an eye on the size of the production build of the application, the new version uses the feature “Bundle Budgets”. Bundle Budgets issues a warning by default if the initial bundle is over 2MB in size, and will throw an error if it is over 5MB.

A helpful innovation in the CLI are the now introduced “prompts”. This extension from @angular/schematics should help the user discover new features. In the future, it will inform users that input is missing or certain features should need enabling. For example, with commands such as: ng new my-app or ng add @foo/bar. In the schematics such prompts can be set via the property x-prompt. See the following example from the Angular Schematic for ng new:

...
"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},
...

Angular Elements

For Angular Elements the support for the official Shadow DOM specification improved. From now on, content can also project into an Angular Element from the outside. This is done via the Native API using elements.

Documentation (angular.io)

The Angular documentation found at https://angular.io/docs now also includes a complete section on the Angular CLI (https://angular.io/cli). The Angular CLI section, which was previously found at https://cli.angular.io/ and the Angular CLI GitHub Repository, is now fully available at angular.io.

Angular Material/CDK

The Angular material and the CDK package receives some new functionality as part of this update. Users upgrading to version 7 can expect virtual scrolling and drag-and-drop functionality, among other things. In order to use both the virtual scrolling and the drag-and-drop functionality, the modules ScrollingModule and DragDropModule must integrate.

Virtual scrolling means that elements of a long list only render dynamically if they are in the visible area of the DOM. As a result, this saves users long loading times. The following code example shows virtual scrolling used in a project that already utilizes Angular Material.

import { ScrollingModule } from ‘@angular/cdk/scrolling’;
import { ScrollDispatchModule } from ‘@angular/cdk/scrolling’;
 
@NgModule({
  imports: [
    ScrollingModule,
    ScrollDispatchModule
    // ...
  ]
})
export class AppModule {}

The VirtualScrollViewport can then be used in the template of a corresponding component:

Technically, itemSize is a separate directive and specifies the height of a list entry in pixels. As an alternative to this parameter, you can also define your own VirtualScrollStrategy and then make it available by dependency injection using the VIRTUAL_SCROLL_STRATEGY token.

Within this ScrollViewport you can now iterate over a list:

  
Entry: {{entry}}

The *cdkVirtualFor directive has the same syntax as the *ngFor directive.

Furthermore, with the DragDrop module, Angular CDK now also includes drag and drop support inside applications. The content within the drag-and-drop area automatically re-renders as soon as the user moves individual entries.

Angular Partners

Many new projects developed in Angular’s vicinity are worth a look. An example is the Angular Console from the creators of the NX-Tools (@nrwl).

With the Angular Console, users can set up and develop Angular projects. It is a graphical management interface for Angular CLI projects including plug-ins (such as your own or 3rd party schematics).

Furthermore, NativeScript continues becoming more and more popular. With NativeScript users can build native apps for mobile devices using Angular without having to master their native languages.

Conclusion

Angular 7 is a major Angular release. It brings with it many small improvements and maintains the dependencies and further performance improvements. Therefore, this Angular release prepares for the future. To avoid a premature release with an incomplete version of the Ivy Renderer, the Angular team subjects the new renderer to an internal test phase. Provided that, in a few months the Ivy Renderer release will have smooth integration. With Angular CLI and Material/CDK, the Angular “platform” continuously broadens, and many partner projects are helping to expand the Angular environment.

The post Angular 7 has arrived: An overview of all new features appeared first on JAXenter.