Extend component with Input/Output

Question

Is it possible to extend a component in Angular 2 and still use the inputs and outputs in the parent?

export class Book {
  @Input() name;
}

export class EBook extends Book {
  @Input() downloadUrl;
  @Input() size;
}

When I try to extend a component everything inside the class works except the code that need attributes/decorators, like inputs and outputs. I made a plunker that illustrates the problem: http://plnkr.co/edit/cfTKgScbaXMmEMoGY0zr

Book is a base component with one input/output Name.

EBook inherits from Book and adds input/output DownloadUrl, Size.

As you can see in the plunker, EBook doesn't get a name since the input is defined in Book and not in EBook

Slartibartfast · Accepted Answer · 2018-11-15 12:56:50Z

7

As for the current version of Angular (7.0.1 while writing this), your use case is perfectly supported. And the issue linked by Oliver has been closed.

Created an example Stackblitz (only highlighting input decorators): https://stackblitz.com/edit/angular-fepmtp

answered Nov 15, 2018 at 12:56

Slartibartfast

1,6134 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oliver Renner · Accepted Answer · 2016-08-09 10:37:49Z

5

as for rc4, input decorators are only inherited if the sub-class has no input decorators itself. otherwise you have to copy all the declarations.

its a known issue, you can follow up here: https://github.com/angular/angular/issues/5415

answered Aug 9, 2016 at 10:37

Oliver Renner

5631 gold badge5 silver badges9 bronze badges

Collectives™ on Stack Overflow

Extend component with Input/Output

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related