base.component.ts

import { OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';

export abstract class BaseComponent implements OnDestroy {

  protected destroyed$: Subject<boolean> = new Subject();

  protected constructor() {}

  ngOnDestroy(): void {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}

If using this pattern you have to be careful if any of the derived components implement their own ngOnDestroy.

class Component extends BaseComponent {
  ngOnDestroy() {
    // oops, now ngOnDestroy on the base component won't get called and observables are probably leaking
  }
}

You'll have to remember to call super:

class Component extends BaseComponent {
  ngOnDestroy() {
    super.ngOnDestroy(); // can't forget this
  }
}

The chance for human error in this pattern makes it a little less appealing.

I really like this approach. Below is a stackblitz showing this in action.

https://stackblitz.com/edit/angular-zjppzp

This should have issues with AOT compilation, see here angular/angular#19145

Clever, implemented with success. Thanks