title: Angular 5 Inheritance / Function Overriding Issue
body: <p>I am trying to create a simple prototype of component inheritance with function overriding using Angular 5. I have created very simple PrototypeParent and PrototypeChild components, where the child extends the parent. I am triggering the call to the overridden function both through a button in the parent's HTML, and through the parent's typescript itself. In both cases, it is <strong>not</strong> calling the overridden function in the child, but instead calling the function in the parent component.</p>
  
  <p>When I navigate to the page through the browser, I am navigating to the child. Note that I am using transclusion (ng-content) for the HTML composition of the page, in case that affects anything.</p>
  
  <p><strong>prototype-parent.component.ts:</strong></p>
  
  <pre><code>export class PrototypeParentComponent {
  
    screenbeanParent: PrototypeParentBean;
  
    constructor() {
    }
  
    ngOnInit() {
    }
  
    functionOverride() {
      console.log("functionOverride() called in Parent");
    }
  
    functionA() {
      this.functionOverride();
    }
  }
  </code></pre>
  
  <p><strong>prototype-child.component.ts:</strong></p>
  
  <pre><code>export class PrototypeChildComponent extends PrototypeParentComponent {
  
    screenbeanChild: PrototypeChildBean;
  
    constructor() {
      super();
    }
  
    ngOnInit() {
    }
  
    functionOverride() {
      console.log("functionOverride() called in Child");
    }
  }
  </code></pre>
  
  <p><strong>prototype-parent.component.html:</strong></p>
  
  <pre><code>&lt;form id="prototypeParent" class="form-horizontal"&gt;
      &lt;div id="header" class="col-sm-12" header-panel&gt;
        &lt;div id="headerPnl" class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;Parent Header Title&lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;button (click)="functionOverride()"&gt;functionOverride()&lt;/button&gt;
            &lt;button (click)="functionA()"&gt;functionA()&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="body" class="col-sm-12"&gt;
        &lt;ng-content select="[prototype-body]"&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
      &lt;div id="footer" class="col-sm-12" footer-panel&gt;
        &lt;div id="footerPnl" class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;Parent Footer Title&lt;/div&gt;
          &lt;div class="panel-body"&gt;
            Angular Function Message:
            &lt;label id="message"&gt;{{screenbeanParent.message}}&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>prototype-child.component.html:</strong></p>
  
  <pre><code>&lt;div id="prototypeChild"&gt;
    &lt;app-prototype-parent&gt;
      &lt;div id="childPnl" class="panel panel-primary" prototype-body&gt;
        &lt;div class="panel-heading"&gt;Child Component Title&lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;button (click)="functionOverride()"&gt;functionOverride()&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/app-prototype-parent&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help or advice as to why the function overriding is not working would be greatly appreciated!</p>