CODEWITHSUNDEEP
angular
Abris
Abris

Reputation: 1481

Extend component with Input/Output

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

Upvotes: 13

Views: 7797

Answers (2)

Slartibartfast
Slartibartfast

Reputation: 1583

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

Upvotes: 7

Oliver Renner
Oliver Renner

Reputation: 563

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

Upvotes: 5

Related Questions