Reusing Angular component code by using TypeScript Inheritance

TypeScript supports the inheritance concept. Certain times, it is very easy to reuse the code using inheritance. If Angular components have similar or identical code, It is very easy to extend a class and reuse the code. This way we can easily avoid copy-pasting the same code block over and over in the components.

Reuse Photo by Noah Buscher on Unsplash

Benefits of using Inheritance in Angular

• Reuse the component code when they have common code and common functionality.
• Create a base component class and extend it to all other components. This base component may contain many reusable code blocks.
• Create a base service class to call the APIs and reuse it in other services.
• In many times when we have Add and Edit scenarios. We can separate the Angular component’s template (HTML) and can use the same component code by extending it. This will avoid writing multiple if cases in the component templates.
• We heavily use environment.ts in Angular to store all endpoints and settings. We generally use a const for it. However, if we want to enforce some of the mandatory settings. We can define a class which may use certain interfaces and define the endpoints.
• The modern-day web applications loves showing data in…