It's good practice to use class inheritance for components in Angular? What about nested inheritance?

Question

If I have some classes like this:

common.ts (under mixins folder):

export class Common { }

base-component.ts:

@Mixin([Validation])
export abstract class BaseComponent extends Common implements Validation {...}

base-list-type-component.ts:

@Injectable()
class BaseListComponent<T, U> extends BaseComponent implements OnInit, OnDestroy {...}

component-with-template.component.ts:

@Component({
  selector: "app-component-with-template",
  templateUrl: "./component-with-template.component.html"
})
export class ComponentWithTemplate extends BaseListComponent<DataInterface, DataService> {...}

It's a good practice to use inheritance like this, in Angular? Regarding the performance what it's better, to use inheritance or create services?

Answer 1

From my experience, using inheritance makes it difficult to debug the parent classes because the debugger/logs will be shown for every child class that implements it.

I try to stay away from inheritance and try to use services or exported functions for common tasks that are done over and over again. The service can be injected anywhere that is needed and can be mocked in a unit test. This pattern is the so called "Favour composability over inheritance".