Angular ContentChildren of extended class : <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>
