Another Approach:

Thierry Templier's answer provides an alternative method to solve the issue.

After discussing with Thierry Templier, I have come up with a different working example that fulfills my requirements as a substitute for the mentioned inheritance limitation:

1 - Implement a custom decorator:

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        // check if annotation is typeof function
        if(typeof annotation[key] === 'function'){
          annotation[key] = annotation[key].call(this, parentAnnotation[key]);
        }else if(
        // force override in base annotation
        !isPresent(annotation[key])
        ){
          annotation[key] = parentAnnotation[key];
        }
      }
    });

    var metadata = new Component(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

2 - Create a Base Component with @Component decorator:

@Component({
  // set base selector for testing property override
  selector: 'master',
  template: `
    <div>Test</div>
  `
})
export class AbstractComponent {

}

3 - Define Sub component with @CustomComponent decorator:

@CustomComponent({
  // override property annotation
  //selector: 'sub',
  selector: (parentSelector) => { return parentSelector + 'sub'}
})
export class SubComponent extends AbstractComponent {
  constructor() {
  }
}

Check out the complete example on Plunkr.

Recently, Angular 2 version 2.3 was launched with a noteworthy addition of native component inheritance feature. This update allows developers to inherit and override various aspects, except for templates and styles. For further information, you can refer to the following sources:

• Exploring new features in Angular 2.3

• Understanding Component Inheritance in Angular 2

• Check out this Plunkr demo showcasing component inheritance

update

Starting from version 2.3.0-rc.0, Angular now supports component inheritance.

original

My preferred approach has been to separate the template and styles into distinct files, such as *html and *.css respectively, and then specify them using templateUrl and styleUrls for easy reusability.

@Component {
    selector: 'my-panel',
    templateUrl: 'app/components/panel.html', 
    styleUrls: ['app/components/panel.css']
}
export class MyPanelComponent extends BasePanelComponent

With the recent update in TypeScript 2.2 now supporting Mixins using Class expressions, there is an improved method for implementing Mixins on Components. While Component inheritance has been available since angular 2.3 (discussion) or through custom decorators as mentioned in other solutions, Mixins offer distinct advantages when it comes to reusing behavior across components:

• Mixins provide more flexibility in composition, allowing you to mix and match them with existing components or combine multiple Mixins to create new Components.
• The linear nature of Mixin composition makes it easier to comprehend within a class inheritance hierarchy.
• Mixins can help avoid complications associated with decorators and annotations commonly found in component inheritance (discussion).

To fully grasp how Mixins operate, it is recommended to review the TypeScript 2.2 announcement linked above and explore the related discussions in GitHub issues pertaining to Angular.

You will need the following types defined:

export type Constructor<T> = new (...args: any[]) => T;

export class MixinRoot {
}

A practical example involves creating a Destroyable mixin that assists components in managing subscriptions that require disposal during ngOnDestroy:

export function Destroyable<T extends Constructor<{}>>(Base: T) {
  return class Mixin extends Base implements OnDestroy {
    private readonly subscriptions: Subscription[] = [];

    protected registerSubscription(sub: Subscription) {
      this.subscriptions.push(sub);
    }

    public ngOnDestroy() {
      this.subscriptions.forEach(x => x.unsubscribe());
      this.subscriptions.length = 0; // clear memory
    }
  };
}

To incorporate the Destroyable mixin into a Component, you define your component as follows:

export class DashboardComponent extends Destroyable(MixinRoot) 
    implements OnInit, OnDestroy { ... }

It's important to note that MixinRoot becomes necessary when extending a Mixin composition. You can extend multiple mixins seamlessly e.g. A extends B(C(D)). This approach exemplifies the straightforward linearization of mixins discussed earlier, essentially forming an inheritance hierarchy A -> B -> C - > D.

In scenarios where you want to apply Mixins to an existing class, you can do so like this:

const MyClassWithMixin = MyMixin(MyClass);

However, incorporating Mixins directly into Components and

Directives</code seems to work best using the first method, especially considering they also require decoration with <code>@Component

or @Directive.

At this point in time, Angular 2 does not support component inheritance. However, if you are using TypeScript, you can achieve class inheritance by extending one class from another with the syntax

class MyClass extends OtherClass { ... }

. To request component inheritance features in Angular 2, consider participating in the Angular 2 project on GitHub at https://github.com/angular/angular/issues.

After delving into the CDK and material libraries, it's evident that while they utilize inheritance, content projection reigns supreme in my opinion. Check out this resource here for more insight on why "the key problem with this design" persists.

In my view, steering clear of inheriting or extending components is the way to go. Here's why:

If an abstract class shared by multiple components houses common logic: opt for a service or craft a new TypeScript class that can be utilized across those components.

If the abstract class... consists of shared variables or onClick functionalities, it may lead to redundant code within the HTML views of the extending components. This practice should be discouraged, and any mutual HTML content should be segregated into separate Component(s). These part(s) can then be shared among the relevant components.

Have I overlooked other justifications for employing an abstract class for components?

A recent example involved components extending AutoUnsubscribe:

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';
export abstract class AutoUnsubscribeComponent implements OnDestroy {
  protected infiniteSubscriptions: Array<Subscription>;

  constructor() {
    this.infiniteSubscriptions = [];
  }

  ngOnDestroy() {
    this.infiniteSubscriptions.forEach((subscription) => {
      subscription.unsubscribe();
    });
  }
}

This scenario proved problematic as across a vast codebase, infiniteSubscriptions.push() was only implemented 10 times. Furthermore, importing & extending AutoUnsubscribe actually demanded more code than simply adding mySubscription.unsubscribe() within the component's ngOnDestroy() method, which also necessitated additional logic regardless.

If you are in need of an updated solution, I found Fernando's answer to be incredibly helpful. The only change I made was using Component instead of the deprecated ComponentMetadata.

Here is the complete code for the Custom Decorator file named CustomDecorator.ts:

import 'zone.js';
import 'reflect-metadata';
import { Component } from '@angular/core';
import { isPresent } from "@angular/platform-browser/src/facade/lang";

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        // check if annotation type is a function
        if(typeof annotation[key] === 'function'){
          annotation[key] = annotation[key].call(this, parentAnnotation[key]);
        }else if(
          // force override in annotation base
          !isPresent(annotation[key])
        ){
          annotation[key] = parentAnnotation[key];
        }
      }
    });

    var metadata = new Component(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

To use this Custom Decorator, import it into your new component file named sub-component.component.ts and replace @Component with @CustomComponent like so:

import { CustomComponent } from './CustomDecorator';
import { AbstractComponent } from 'path/to/file';

...

@CustomComponent({
  selector: 'subcomponent'
})
export class SubComponent extends AbstractComponent {

  constructor() {
    super();
  }

  // Write your additional logic here!
}

Just like typescript class inheritance, components can be extended by overriding the selector with a new name while maintaining the functionality of Input() and Output() properties from the Parent Component.

Additional Information:

The @Component is a decorator applied during the declaration of a class, not on objects.

Decorators add metadata to the class object that cannot be accessed through inheritance. To achieve Decorator Inheritance, consider creating a custom decorator as shown in the example below.

export function CustomComponent(annotation: any) {
    return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;

    // Retrieve metadata from parent class
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);
    var parentParamTypes = Reflect.getMetadata('design:paramtypes', parentTarget);
    var parentPropMetadata = Reflect.getMetadata('propMetadata', parentTarget);
    var parentParameters = Reflect.getMetadata('parameters', parentTarget);

    var parentAnnotation = parentAnnotations[0];

    // Merge parent annotation with current annotation
    Object.keys(parentAnnotation).forEach(key => {
    if (isPresent(parentAnnotation[key])) {
        if (!isPresent(annotation[key])) {
        annotation[key] = parentAnnotation[key];
        }
    }
    });
    
    // Update metadata for current class
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
    };
};

For more information, please refer to: https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7

To extend functionality in Angular, you can utilize @Input, @Output, @ViewChild, and more. Take a look at this example:

@Component({
    template: ''
})
export class BaseComponent {
    @Input() someInput: any = 'something';

    @Output() someOutput: EventEmitter<void> = new EventEmitter<void>();
}

@Component({
    selector: 'app-derived',
    template: '<div (click)="someOutput.emit()">{{someInput}}</div>',
    providers: [
        { provide: BaseComponent, useExisting: DerivedComponent }
    ]
})
export class DerivedComponent {

}

To implement inheritance in Angular, you can extend a parent class in the child class and pass the parent class parameters in the constructor using super().

1. Parent class:

@Component({
  selector: 'teams-players-box',
  templateUrl: '/maxweb/app/app/teams-players-box.component.html'
})
export class TeamsPlayersBoxComponent {
  public _userProfile: UserProfile;
  public _user_img: any;
  public _box_class: string = "about-team teams-blockbox";
  public fullname: string;
  public _index: any;
  public _isView: string;
  indexnumber: number;

  constructor(
    public _userProfilesSvc: UserProfiles,
    public _router: Router,
  ){}

2. Child class:

@Component({  
  selector: '[teams-players-eligibility]',  
  templateUrl: '/maxweb/app/app/teams-players-eligibility.component.html'  
})  
export class TeamsPlayersEligibilityComponent extends TeamsPlayersBoxComponent {  
  constructor (public _userProfilesSvc: UserProfiles,
    public _router: Router) {  
      super(_userProfilesSvc,_router);  
    }  
  }