title: Angular 2.3 Component Inheritance and Dependency Injection
body: <p>How can I share dependency injection between child and parent components with the new Angular 2.3 Component Inheritance.</p>
  
  <p>e.g. I want to move AlertService down into the parent component and leave TraingCompanyService in the derived component</p>
  
  <p><strong>Current Component</strong></p>
  
  <pre><code>@Component({
      selector: 'wk-training-company-edit',
      template: require('./edit.html')
  })
  export class TrainingCompanyEditComponent implements OnInit, OnDestroy {
  
      constructor(
                  private alert: AlertService,
                  private trainingCompanyService: TrainingCompanyService
                  ) {
  
      }
  }
  </code></pre>
  
  <p><strong>Refactored Components (V1)</strong></p>
  
  <blockquote>
    <p>Super must be called before calling this in the constructor of the derived class</p>
  </blockquote>
  
  <pre><code>@Component({
      selector: 'wk-training-company-edit',
      template: require('./edit.html')
  })
  export class TrainingCompanyEditComponent extends BaseAdminEditComponent implements OnInit, OnDestroy {
  
      constructor(
                  private alert: AlertService,
                  private trainingCompanyService: TrainingCompanyService
                  ) {
  
          // Error: Super must be called before calling this in the constructor of the derived class
          super(this.alert);
      }
  }
  
  export class BaseAdminEditComponent {
  
      constructor(private alert: AlertService) {
      }
  
      protected handleSaveError(error: any) {
  
          if (error.message) {
              if (error.errors &amp;&amp; _.isArray(error.errors) &amp;&amp; error.errors.length &gt; 0) {
                  this.alert.error(_.join(error.errors, '\n'), error.message);
              }
              else {
                  this.alert.error(error.message);
              }
          }
      }
  }
  </code></pre>
  
  <p><strong>Refactored Components (V2)</strong></p>
  
  <blockquote>
    <p>Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent, types have seperate declarations of private property 'alert'</p>
  </blockquote>
  
  <pre><code>@Component({
      selector: 'wk-training-company-edit',
      template: require('./edit.html')
  })
  export class TrainingCompanyEditComponent extends BaseAdminEditComponent implements OnInit, OnDestroy {
  
      // Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent, types have seperate declarations of private property 'alert'
      constructor(
                  private alert: AlertService,
                  private trainingCompanyService: TrainingCompanyService
                  ) {
  
          // alert instead of this.alert
          super(alert);
      }
  }
  
  export class BaseAdminEditComponent {
  
      constructor(private alert: AlertService) {
      }
  
      protected handleSaveError(error: any) {
  
          if (error.message) {
              if (error.errors &amp;&amp; _.isArray(error.errors) &amp;&amp; error.errors.length &gt; 0) {
                  this.alert.error(_.join(error.errors, '\n'), error.message);
              }
              else {
                  this.alert.error(error.message);
              }
          }
      }
  }
  </code></pre>
  
  <p><strong>Refactored Components (V3)</strong></p>
  
  <blockquote>
    <p>This works, just wondering if it is the best technique</p>
  </blockquote>
  
  <pre><code>@Component({
      selector: 'wk-training-company-edit',
      template: require('./edit.html')
  })
  export class TrainingCompanyEditComponent extends BaseAdminEditComponent implements OnInit, OnDestroy {
  
      // Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent, types have seperate declarations of private property 'alert'
      constructor(
                  private alert: AlertService,
                  private trainingCompanyService: TrainingCompanyService
                  ) {
  
          // alert instead of this.alert
          super(alert);
      }
  }
  
  export class BaseAdminEditComponent {
  
      // Create a private variable with a different name, e.g. alert2
      private alert2: AlertService;
  
      constructor(alert: AlertService) {
          this.alert2 = alert;
      }
  
      protected handleSaveError(error: any) {
  
          if (error.message) {
              if (error.errors &amp;&amp; _.isArray(error.errors) &amp;&amp; error.errors.length &gt; 0) {
                  this.alert2.error(_.join(error.errors, '\n'), error.message);
              }
              else {
                  this.alert2.error(error.message);
              }
          }
      }
  
  }
  </code></pre>