Class inheritance support

Question

I am building an Angular2 application in Typescript and would like to use the class system functionality (read: class inheritance) offered by Typescript. However, it seems t

Answer 1

You can use a local template variables with a ContentChildren query to create a list of all components with a shared base class. Here is a plunk for the code below. This approach was taken from the suggestion in Kara Erickson's Rookie mistakes blog post.

In the template each child component is marked with #child:

This can then be used to select all the components with the shared base component:

  import { Component, QueryList, ContentChildren, ViewChildren, AfterViewInit, AfterContentInit } from '@angular/core';
  import { BaseComponent } from '../base/base.component';
  import { Child1Component } from '../child1/child1.component';
  import { Child2Component } from '../child2/child2.component';

  @Component({
    selector: 'app-container',
    templateUrl: './src/container/container.component.html'
  })
  export class ContainerComponent implements AfterContentInit  {
    @ContentChildren('child') allChildren: QueryList;
    @ContentChildren(Child1Component) child1Chdilren: QueryList;
    @ContentChildren(Child2Component) child2Chdilren: QueryList;

    constructor() { }

    ngOnInit() {
    }

    ngAfterContentInit() {
    }

  }