5

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)?

n1stre
  • 5,856
  • 4
  • 20
  • 41
Nebojsa Kurjakov
  • 61
  • 6
  • 1
    Check this question http://stackoverflow.com/questions/38153962/issue-with-binding-and-viewchild – yurzui Nov 10 '16 at 05:08
  • Thanks yurzui! I've seen the post from Thierry Templier, but it seems that I haven't read it carefully at the time. It's a shame that in order to use inheritance for ang2 components you have to use reflection and some "tricks"... – Nebojsa Kurjakov Nov 11 '16 at 17:15

1 Answers1

0

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

LeonardoX
  • 1,113
  • 14
  • 31