title: Input properties in inherited angular 2 components
body: <p>I'm trying to implement components in angular 2 by inheriting some base class which has some Input properties (I've used <a href="https://stackoverflow.com/questions/36063627/angular2-and-class-inheritance-support">this example</a> as a guide for implementing inheritance for angular 2 components).</p>
  
  <p><strong>Simplified Example</strong></p>
  
  <pre><code>export class ComponentBase {
    @Input() text: string = "base";
  }
  
  @Component({
    selector: "derived-comp",
    templateUrl: "derived-comp.template.html",
    providers: [
      { provide: ComponentBase, useExisting: forwardRef(() =&gt; DerivedComponent) }
    ]
  })
  export class DerivedComponent extends ComponentBase {
    @Input() dummy: number;
  }
  </code></pre>
  
  <p>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: </p>
  
  <blockquote>
    <p>Can't bind to 'text' since it isn't a known property of
    'derived-comp.'</p>
  </blockquote>
  
  <p>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)?</p>