How To Extend Classes with Angular Component Inheritance

Introduction

If you have spent any time in Angular, you may have come across a time when you wanted to share data or functionality and you used services/providers.

What if, instead of common data functionality, you want common UI functionality? For example, consider a simple scenario where you want to navigate from one component to another using buttons. A simple way to implement this is to create a button, call a method in the code which then uses the Angular router to navigate to the page. And what if you didn’t want to repeat the same code in each component? Typescript and Angular give you a way to handle this encapsulation. Inherited components!

Using class inheritance in TypeScript, you can declare a base component that contains common UI functionality and use it to extend any standard component you’d like. If you’re used to any language focused on object-oriented methodology such as C#, you’ll recognize this approach pretty easily as inheritance. With Typescript, it’s merely known as extending a class.

In this article, you will encapsulate your common code in a base component and extend it to create reusable page navigation buttons.