angular / angular/angular

[FR] Make components subclassable without template

Open
#47,900 13 comments 35 reactions 0 assignees View on GitHub
area: core core: component extension and customization feature feature: under consideration
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### 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

Contributor guide

Open the contributing guide

Research direction

Start in Angular's core component inheritance and compilation behavior around the reported NG2001 error. Reproduce a subclassed component without template or templateUrl, then trace how the superclass template is handled. Done means a component subclass can override UI logic without redeclaring the inherited template, with coverage for the supported behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.