[FR] Make components subclassable without template

[nlmarco]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Angular lately added support for subclassing a component. It is thus now possible for a downstream-app to override a component's base-implementation in a lib. According to the docs I read, all you have to do is declare the same selector. Unfortunately, though, the subclass requires template or templateUrl -- without it, I get this error:

 error NG2001: component is missing a template

My app-code doesn't have access to the lib's template-file (declared there via templateUrl) and IMHO I should not be forced to re-declare the template, if I do not want to replace it (but inherit it the way it is in the super-component).

The component-class contains the UI-logic. It should be easily possible for a downstream-lib/-app to customize this logic, i.e. override protected/public methods, without touching the UI (i.e. without re-declaring a template).

Proposed solution

Make the @Component(...)-annotation's template and templateUrl optional for component-subclasses. A component-subclass should easily be able to override UI-logic without providing its own template.

Alternatives considered

We tried to extract the UI-logic from the component into a stateful service which is associated 1-to-1 with its component. This, however, doesn't work either -- hence, I opened this other feature-request: https://github.com/angular/angular/issues/47899

[nlmarco]

I finally found the time to test overriding a component (before I only read about it). I thought that it would work this way:

Upstream-library

Component

@Component({
  selector: 'my-component',
  template: '<br>aaaaaaaaaaaaaaaaaaaaaaa<br>'
})
export class MyComponent {
  ...

Module

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent]
})
export class MyLibModule {}

Downstream-library/-app

Component

@Component({
  selector: 'my-component',
  template: '<br>bbbbbbbbbbbbbbbbbbbbbbb<br>'
})
export class ExtComponent extends MyComponent {
  ...

Module

@NgModule({
  declarations: [ExtComponent],
  exports: [ExtComponent],
  imports: [MyLibModule]
})
export class MyAppModule {}

Not working :cry:

I still see "aaaaaaaaaaaaaaaaaaaaaaa" -- the ExtComponent seems to be ignored. Am I doing anything wrong? Or is overriding a component not yet supported at all? I thought I read somewhere that this was supported for quite a while -- but maybe this was a misunderstanding?

If this is not yet supported, I hereby extend my feature-request :smirk: It should be possible in a downstream-lib (or -app) to replace an upstream-component by declaring the same selector. The most downstream declaration should win -- just like it is for service-providers.

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[nlmarco]

:+1:

[fsunet]

:+1:

[ntswor]

👍

[sviat9440]

👍

[demike]

If you think about making template and templateUrl 'inheritable'. You should also consider styles and styleUrls. Because you also do not have access to the upstream css/scss files

[alt-13]

👍