Angular ContentChildren of extended class

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. 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: http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa?p=preview Here is my code: Child abstract class: ``` abstract export class Child{ value: any; abstract setValue(); } ``` My parent code: ``` @Component({ selector: 'parent', template: ` <div> parent <ng-content></ng-content> </div> `, }) export class Parent { @ContentChild(Child) child: Child; name:string; constructor() { } ngAfterViewInit() { this.child.setValue(); } } ``` First child: ``` @Component({ selector: 'child1', template: ` <div> value is: {{value}} </div> `, }) export class Child1 extends Child { name:string; constructor() { } setValue() {this.value = 'Value from child 1'} } ``` Second child: ``` @Component({ selector: 'child2', template: ` <div> value is: {{value}} </div> `, }) export class Child2 extends Child { name:string; constructor() { } setValue() {this.value = 'Value from child 2'} } ```