Angular — Maintenance issue caused by component inheritance

Inheritance is a popular way to reuse existing components. Many developers rely heavily on inheritance for code reuse, especially for whom with a strong object-oriented programming background. It is true that inheritance is very convenient to use. However, it is in fact, a double edged sword which can cause cause maintenance issue.

Image from Arbor Day Foundation

Issue 1: Inheritance doesn’t work for HTML and CSS

Angular utilizes TypeScript which nicely supports an object-oriented programming style. Yet, Angular also has elements that are not object-oriented, which are the HTML and CSS. These elements do not have the concept of inheritance. We can inherit a class, but there is no way to inherit HTML or CSS. For example, assume we have a ComponentA:

@Component({
  template: `Hi, I am ComponentA. Value = {{ value }}`
})
export class ComponentA {
  value = 1;
}

When we want to make change to the HTML or CSS during inheritance, we will need to make a new one. All the existing HTML or CSS codes are not reusable.

@Component({
  template: `Hi, I am ComponentB. Value = {{ value }}`
})
export class ComponentB extends ComponentA {}

Besides, when there is new feature in the future that requires change in the HTML or CSS , such…