Angular 2 — New features in Angular 2.3 – Google Developers Experts – Medium

  • 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.
  • Constructor : the base class constructor will be used if the derived class doesn’t have one.
  • If no constructor is defined within the Square class the Polygon constructor will be used.
  • We will use an example using a Polygon and a Square class.
  • Square, the derived class , will have access to features available in Polygon and will be able to override them or add new ones.

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.

@SynxS: #Angular 2.3 new features : Component inheritance #JavaScript @angularjs @ngParis…

Angular 2 — New features in Angular 2.3

A review of new features included in Angular 2.3

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:

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 2 content at my feed at @gerardsans.

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

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 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.

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.

Since Angular 2* 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

This is syntax sugar for

You can play with the final code here.

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

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.

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.

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!

Angular 2 — New features in Angular 2.3 – Google Developers Experts – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.