title: angular 2 inheriting from a base-component
body: <p>My question is an extension to another question here on so: <a href="https://stackoverflow.com/questions/36063627/angular2-and-class-inheritance-support/37041446?noredirect=1#comment64033183_37041446">Angular2 and class inheritance support</a></p>
  
  <p>And here is my plunckr:
  <a href="http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview" rel="noreferrer">http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview</a></p>
  
  <p>What I am trying to do is the following:</p>
  
  <p>I have some common functionallity whcih all of my components will have to use. As it already has been answered in the aforementioned question, this can be done.</p>
  
  <p>My question is: Can I have dependencies injected in the base-component? In my plunkr the declared dependency (<code>FormBuilder</code>) is undefined when logged to console.</p>
  
  <pre><code>import {AfterContentChecked, Component, ContentChildren, Input, QueryList, forwardRef, provide, Inject} from '@angular/core';
  import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
  
  
  
  @Component({
    providers: [FormBuilder]
  })
  export class BaseComponent {
    // Interesting stuff here
    @Input() id: string;
  
    constructor(formBuilder: FormBuilder){
      console.log(formBuilder);
      console.log('inside the constructor');
    }
  
  
  }
  
  @Component({
    selector: 'child-comp2',
    template: '&lt;div&gt;child component #2 ({{id}})&lt;/div&gt;',
    providers: [provide(BaseComponent, { useExisting: forwardRef(() =&gt; ChildComponent2) })]
  })
  export class ChildComponent2 extends BaseComponent {
  
  
  }
  
  @Component({
    selector: 'child-comp1',
    template: '&lt;div&gt;child component #1 ({{id}})&lt;/div&gt;',
    providers: [provide(BaseComponent, { useExisting: forwardRef(() =&gt; ChildComponent1) })]
  })
  export class ChildComponent1 extends BaseComponent {
  
  
  }
  
  @Component({
    selector: 'parent-comp',
    template: `&lt;div&gt;Hello World&lt;/div&gt;
     &lt;p&gt;Number of Child Component 1 items: {{numComp1}}
     &lt;p&gt;Number of Child Component 2 items: {{numComp2}}
     &lt;p&gt;Number of Base Component items: {{numBase}}
     &lt;p&gt;&lt;ng-content&gt;&lt;/ng-content&gt;
     &lt;p&gt;Base Components:&lt;/p&gt;
     &lt;ul&gt;
      &lt;li *ngFor="let c of contentBase"&gt;{{c.id}}&lt;/li&gt;
     &lt;/ul&gt;
    `
  })
  export class ParentComponent implements AfterContentChecked  {
  
    @ContentChildren(ChildComponent1) contentChild1: QueryList&lt;ChildComponent1&gt;
    @ContentChildren(ChildComponent2) contentChild2: QueryList&lt;ChildComponent2&gt;
    @ContentChildren(BaseComponent) contentBase: QueryList&lt;BaseComponent&gt;
    public numComp1:number
    public numComp2:number
    public numBase:number
  
    ngAfterContentChecked() {
      this.numComp1 = this.contentChild1.length
      this.numComp2 = this.contentChild2.length
      this.numBase = this.contentBase.length
    }
  }
  
  @Component({
    selector: 'my-app',
    template: `&lt;parent-comp&gt;
        &lt;child-comp1 id="A"&gt;&lt;/child-comp1&gt;
        &lt;child-comp1 id="B"&gt;&lt;/child-comp1&gt;
        &lt;child-comp2 id="C"&gt;&lt;/child-comp2&gt;
      &lt;/parent-comp&gt;
    `,
    directives: [ParentComponent, ChildComponent1, ChildComponent2]
  })
  export class MyApplication  {
  
  }
  </code></pre>