Sharing Top Content from the Angular-sphere.

Angular Component Inheritance and Template Swapping

  • In these instances many times our component is a presentation component displaying this data and we have the same and data.
  • In this post we are going to use Angular Component Inheritance to derive two sub components to display some data.
  • In this particular use case Component Inheritance is rather helpful when our templates have drastic differences in markup but display the same data.
  • We can see above that we can share our base component logic and have drastically different template that share the same behavior.
  • While composition is the preferred way to use components using component inheritance can provide benefits in certain use cases.

Learn how to use Angular Component Inheritance to create components with multiple template options.

This article is for versions of Angular 2, Angular 4, Angular 5 and later.

Angular components are a fantastic way to break up our web apps into small easy to understand pieces of UI code. Sometimes in certain apps we have drastic layout differences for the same data being displayed. A example could be differences between mobile and desktop layouts. Sometimes it could be displaying our data in different formats such as a list view vs a table view.

In these instances many times our component is a presentation component displaying this data and we have the same and data. In these cases it would be really helpful to be able to swap the templates when displaying the data in different formats. In this post we are going to use Angular Component Inheritance to derive two sub components to display some data. One component will be a list view and another a table view.

Overall I do not recommend using Component Inheritance but rather use composition to mix and match multiple components together. In this particular use case Component Inheritance is rather helpful when our templates have drastic differences in markup but display the same data.

First we need to define our base class that contains all of the logic we want to share.

Our base employee component has one input and one output. It…

Angular Component Inheritance and Template Swapping