Angular 4 - Template inheritance

Question

I have the following child component and it's inheritance parent component:

@Component({
   template: `<p>child</p>`
})
export class EditChildComponent extends EditViewComponent{
   constructor(){
     super();
   }
}



@Component({
   template: `<p>parent</p>`
})
export class EditViewComponent{
   constructor(){
   }
}

Now is there any way to place the template of the EditViewComponent in the ChildComponents template like you would do with ng-content in nested components? How would I get the following result:

<p>parent</p>
<p>child</p>

Answer 1

Currently Angular Doesn't provide this feature. But you can use "Narik" to apply "UI Inheritance" in angular.

https://docs.narik.me/04.-ui-inheritance

Answer 2

Look on this article: Angular 2, decorators and class inheritance

Example: plnkr.co

import {bootstrap} from 'angular2/platform/browser';
import {
  Component, 
  ElementRef,
  ComponentMetadata
} from 'angular2/core';
import { isPresent } from 'angular2/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])) {
        // verify is annotation typeof 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 ComponentMetadata(annotation);

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

@Component({
  // create seletor base for test override property
  selector: 'master',
  template: `
    <div>Parent component</div>
  `
})
export class AbstractComponent {

}

@CustomComponent({
  // override property annotation
  //selector: 'sub',
  // ANSWER: it's not possible like that but you could have a function here. Something like:
  template: (template) => { return template + 'add html to temlate in child'}
  selector: (parentSelector) => { return parentSelector + 'sub'}
})
export class SubComponent extends AbstractComponent {
  constructor() {
    //console.log(super);
  }
}

@Component({
  selector: 'app',
  // CHECK: change view for teste components
  template: `
    <div>
      <div><sub>seletor sub not work</sub></div>
      <div><master>selector master not work</master></div>
      <div><mastersub>selector mastersub not work</mastersub></div>
    </div>
  `,
  directives [ SubComponent ]
})
export class App {

  constructor(private elementRef:ElementRef) {
  }

}

bootstrap(App).catch(err => console.error(err));