Input properties in inherited angular 2 components

Question

I'm trying to implement components in angular 2 by inheriting some base class which has some Input properties (I've used this example as a guide for implementing inheritance for angular 2 components).

Simplified Example

export class ComponentBase {
  @Input() text: string = "base";
}

@Component({
  selector: "derived-comp",
  templateUrl: "derived-comp.template.html",
  providers: [
    { provide: ComponentBase, useExisting: forwardRef(() => DerivedComponent) }
  ]
})
export class DerivedComponent extends ComponentBase {
  @Input() dummy: number;
}

It all works as expected, until I add a new Input property in derived component (dummy, in the provided sample). When I do that, all of the Input properties defined in base class become invisible in runtime (although everything is ok at compile-time), and there's an error in browser console saying that those inputs don't exist:

Can't bind to 'text' since it isn't a known property of 'derived-comp.'

Has anyone had a similar problem with component inheritance in angular 2? Does anyone have a suggestion on how to overcome it (other than copy-paste of the code)?

Answer 1

Maybe in old Angular versions this was a pia, but now it's very easy. See this post