title: Angular ContentChildren of extended class
body: <p>I have 3 components. 1 parent component that can wrap one of any 2 child components inside an ng-content. My child components have shared functionality so they are extending an abstract class that have the shared functionality. </p>
  
  <p>When I try to use ContentChildren  to get the ng-content reference, it works fine if I am using one of the child classes. When I reference the abstract class, it does not work. Is there a way to make this work? plkr is: <a href="http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa?p=preview" rel="noreferrer">http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa?p=preview</a> </p>
  
  <p>Here is my code: </p>
  
  <p>Child abstract class: </p>
  
  <pre><code>    abstract export class Child{
        value: any;
        abstract setValue();
      }    
  </code></pre>
  
  <p>My parent code: </p>
  
  <pre><code>@Component({
    selector: 'parent',
    template: `
      &lt;div&gt;
        parent
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
    `,
  })
  export class Parent {
    @ContentChild(Child) 
    child: Child;
    name:string;
    constructor() {
  
    }
     ngAfterViewInit() {
       this.child.setValue();
     }
  }
  </code></pre>
  
  <p>First child: </p>
  
  <pre><code>@Component({
    selector: 'child1',
    template: `
      &lt;div&gt;
         value is: {{value}}
      &lt;/div&gt;
    `,
  })
  export class Child1 extends Child {
    name:string;
    constructor() {
  
    }
     setValue() {this.value = 'Value from child 1'}
  }
  </code></pre>
  
  <p>Second child: </p>
  
  <pre><code>@Component({
    selector: 'child2',
    template: `
      &lt;div&gt;
        value is: {{value}}
      &lt;/div&gt;
    `,
  })
  export class Child2  extends Child {
    name:string;
    constructor() {
  
    }
    setValue() {this.value = 'Value from child 2'}
  }
  </code></pre>