inherance.ts

import {Component, NgModule, Input, Output, EventEmitter, HostBinding, HostListener} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
  selector: 'compA',
  template: `<h4>CompA: {{propA}}</h4>`
})
export abstract class CompA {

  @Input() public propA;
  @Output() eventClick = new EventEmitter();

  @HostBinding('style.color') color = 'red';

  abstract methodComp():void;

  @HostListener('click')
  onClick(e){
    console.log(this.propA);
    this.eventClick.emit(this.propA);
  }
}

@Component({
  selector: 'compB',
  template: `
    <h4>CompB: {{propA}}</h4>
  `
})
export class CompB extends CompA {

 
  @HostListener('click')
  onClick(e) {
    console.log(`${this.propA}`);
    this.eventClick.emit(this.propA);
    this.methodComp();

  }


  methodComp() {
    console.log('methodComp');
  }

}


@Component({
  selector: 'my-app',
  template: `
    <div>
      <compA (eventClick)="myValueChange($event)" propA="CompA"></compA>
      <compB (eventClick)="myValueChange($event)" propA="CompB" ></compB>
    </div>
  `,
})
export class App {
 
  myValueChange (event) {
    console.log(event);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App,CompA, CompB  ],
  bootstrap: [ App ]
})
export class AppModule {}