Angular — New features in Angular 2.3

A review of new features included in Angular 2.3

John Maeda — Laws of simplicity

In this post we are going to look into some new features in Angular 2.3. This is a minor release following the semantic versioning announced back in October. Let’s explore some of these features:

• Components Inheritance
• ViewContainer (Structural Directives)*
• Access to Angular Version
• Language Service for templates

As previous versions, it is very easy to upgrade, and a list of breaking changes (if any) can be found on the Angular blog to guide you in the process.

Find the latest Angular content at my feed at @gerardsans.

*Correction: this feature has been available since Angular final. I’ll keep it as I think is worth knowing about it. Thanks to Netanel Basal for the heads up!

Components Inheritance

This is a very interesting addition in Angular 2.3. By using Components Inheritance we can improve code reusability and speed up development.

Let’s start by quickly reviewing ES6 class inheritance. We will use an example using a Polygon and a Square class.

Note ES6 class inheritance is only syntax sugar on top of ES5 prototypical inheritance.

Polygon is our base class. Square, the derived class, will have access to features available in Polygon and will be able to override them or add new ones. Square class inherited from Polygon class by using extends (line 9). This will give it access to its constructor using super (line 11) and all its properties and methods. It also extended the base class adding the area getter (lines 14–16).

If no constructor is defined within the Square class the Polygon constructor will be used.

Component Inheritance in Angular 2.3 covers all of the following

• Metadata (decorators): metadata defined in a derived class will override any previous metadata in the inheritance chain otherwise the base class metadata will be used.
• Constructor: the base class constructor will be used if the derived class doesn’t have one.
• Lifecycle hooks: parent lifecycle hooks will be called even when are not defined in the derived class.

Metadata inheritance covers many decorators: class (@NgModule, @Component, @Directive, @Pipe), properties (@Input, @Output, @ContentChild/Children, @ViewChild/Children, @HostBinding, @HostListener) and arguments (@Host, @Optional). Check the commit here to find out the full list.

Animations are not supported yet so these are not shared with the derived class.

Let’s see a simple Component Inheritance example:

On this example, the Employee Component inherited the name attribute via @Input from the Person Component and added a new one, id (line 19). As with ES6 Inheritance we can override any settings from the parent to meet our requirements.

Components Inheritance is very powerful and can help you build better Applications

Templates are not inherited so any shared DOM or behaviours must be handled separately.

Find a more complete example here. You can also read more details in this commit.

ViewContainer (Structural Directives)

Since Angular v2* we can use ViewContainer simplifying structural directives authoring like ngIf.

We don’t require to manually deal with creating the View, setting up the resulting DOM elements and connecting change detection. The ViewContainer will deal with these for us resulting in the following code.

Let’s see an example of how we would use it

<div>
  <h2 *myIf="show">Hello {{name}}</h2>  <-- EmbeddedView 
  <button (click)="show=!show">
    Toggle
  </button>
</div>

This is syntax sugar for

<template [myIf]="show">     <-- ViewContainerRef
  <h2>Hello {{name}}</h2>      <-- TemplateRef
</template>

You can play with the final code here.

More details can be found in the slides from Pawel Kozlowski at ng-be.

Access to Angular version

This is a neat feature adding the version of Angular being used in the Root Component. As an example, let’s see the reference implementation for Plunker below.

<my-app ng-version="2.3.0">
  <div>
    <h2>Hello Angular2</h2>
  </div>
</my-app>

We can also access version details programatically using the following code.

import {VERSION} from '@angular/core';
console.log(VERSION);
// {
//  full: "2.3.0"
//  major: "2"
//  minor: "3"
//  patch: "0"
// }

A demo of this code can be found here.

Language Service for templates

Similar to TypeScript Language Service, this Language Service will provide support for Angular templates. By using it, IDEs will be able to provide more detailed errors and type completion. Support for VS Code is also expected soon!

I do recommend watching the Keynote at ng-be by Igor Minar covering future versions of Angular and semantic versioning.

That’s all! Think I missed some features? Contact me on @gerardsans or gerard.sans_at_gmail.com. Thanks for reading!

AngularZone Community