Angular 7 Features

Angular 7

Big News !!! Angular 7.0.0 is released…

It is released with Angular Material 7 and Angular CLI 7.

Angular 7 is released with improved application performace. Angular Material 7 and CDK have new features like Virtual Scrolling, Drag and Drop. CLI prompts is the new feature in Angular CLI 7. 

Find below major features of Angular 7. Refer Angular Blog for official release notes. 

Angular 7 will be backward compatible with the Angular 6. So it will be easy to upgrade angular 6 application to angular 7.

Angular 7 beta and rc versions are released with a lot of bug fixes, new features and breaking changes.

Let’s see what will be the major features of Angular 7 !!!

Angular 7 Major Features

TypeScript 3.1 Support

Updated Domino to v2.1.0

RxJS 6.3

Added support for Node 10, still support 8

Ivy Renderer

The Ivy rendering engine is a new backward-compatible Angular renderer main focused on

  1. Speed Improvements
  2. Size Reduction
  3. Increased Flexibility

This important feature will reduce the code size and makes compilation faster.

  • Template functions for dynamically created views are no longer nested inside each other. Instead of nesting the functions and using closures to get parent contexts, the parent contexts are re-defined explicitly through an instruction. This means we no longer create multiple function instances for loops that are nested inside other loops.

Old Behaviour :

function AppComponent(rf: RenderFlags, ctx: AppComponent) {
      // some instructions here
      function ulTemplate(rf1: RenderFlags, ctx0: any) {
            // instructions
            function liTemplate(rf1: RenderFlags, ctx1: any) {...}
      }
}

New Behaviour :

<ul *ngFor="let list of lists">
   <li *ngFor="let item of list'> {{ item }} {{ name }} </li>
</ul>

Angular Compatibility Compiler (ngcc)

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.

This compiler will convert node_modules compiled with Angular Compatibility Compiler (ngcc), into node_modules which appear to have been compiled with TSC compiler transformer (ngtsc) and this compiler conversion will allow such “legacy” packages to be used by the Ivy rendering engine.

TSC transformer which removes and converts @Pipe, @Component, @Directive and @NgModule to the corresponding definePipe, defineComponent, defineDirective and defineInjector.

DoBootstrap

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

//ngDoBootstrap - Life-Cycle Hook Interface
class AppModule implements DoBootstrap {
    ngDoBootstrap(appRef: ApplicationRef) {
        appRef.bootstrap(AppComponent);
    }
}

Updated XMB Placeholders

  • Updated XMB placeholders() to include the original value on top of an example. Now placeholders can by definition have one example() tag and a text node. The text node is used by TC as the “original” value from the placeholder, while the example should represent a dummy value. Let’s take a look examples below:

A message like Name: {{yourName}} would generate this xmb message in current and new behaviour:

Current Behaviour :

<msg id=123>Name: <ph name="INTERPOLATION"><ex>{{yourName}}</ex></ph></msg>

New Behaviour :

<msg id=123>Name: <ph name="INTERPOLATION"><ex>{{yourName}}</ex>{{yourName}}</ph></msg>

 

Added UrlSegment[] to CanLoad interface.

Current Behaviour :

The Route object as passed to implementations of CanLoad which only provides minimal information on the page which should be navigated to.

New Behaviour : 

Additionally to Route an UrlSegment[] is passed to implementations of CanLoad as a second parameter. It contains the array of path elements the user tried to navigate to before canLoad is evaluated.

Other Angular 7 Important Features

Produce a warning when router navigation triggered outside Angular zone with NgZone enabled on dev mode.

Enable Shadow DOM v1 and slots

Adds a new optional parameter to the renderer.selectRootElement method:

Before:

renderer.selectRootElement(rootSelectorOrNode);
renderer.selectRootElement(rootSelectorOrNode, preserveContents?:boolean);

preserveContents defaults to false to preserve existing renderer behavior. If set to true, the renderer will not remove the existing contents of a root element when bootstrapping a component.

This is primarily useful when combined with the ViewEncapsulation.ShadowDom Renderer – the nodes are preserved, and developers can use <slot> elements to re-project the light DOM nodes.

Added support to extend angularCompilerOptions

Current Behaviour :

TypeScript only supports merging and extending of compilerOptions.

New Behaviour :

This is an implementation to support extending and inheriting of angularCompilerOptions from multiple files.

 Bazel :

  • Added additional parameters : strip_export_pattern and allow_module_identifiers to ts_api_guardian_test.

Ivy :

  • Allow combined context discovery for components, directives, and elements
  • Resolve references to vars in .d.ts files :

    Previously, if ngtsc encountered a Variable Declaration without an initializer, it would assume that the variable was undefined, and return that result.

    However, for symbols exported from external modules that resolve to .d.ts files, variable declarations are of the form:

    export declare let varName: Type;

    This form also lacks an initializer, but indicates the presence of an importable symbol which can be referenced. This feature changes the static resolver to understand variable declarations with the declare
    keyword and to generate references when it encounters them.

  • Support animation @triggers in templates.
  • Support bootstrap in ngModuleDef.
Angular Application Development

Related Articles : Angular Version History , Angular 6 Features