title: How to extend / inherit components?
body: <p>I would like to create extensions for some components already deployed in Angular 2, without having to rewrite them almost completely, as the base component could undergo changes and wish these changes were also reflected in its derived components.</p>
  
  <p>I created this simple example to try to explain better my questions:</p>
  
  <p>With the following base component <code>app/base-panel.component.ts</code>:</p>
  
  <pre><code>import {Component, Input} from 'angular2/core';
  
  @Component({
      selector: 'base-panel',
      template: '&lt;div class="panel" [style.background-color]="color" (click)="onClick($event)"&gt;{{content}}&lt;/div&gt;',
      styles: [`
      .panel{
      padding: 50px;
    }
    `]
  })
  export class BasePanelComponent { 
  
    @Input() content: string;
  
    color: string = "red";
  
    onClick(event){
      console.log("Click color: " + this.color);
    }
  }
  </code></pre>
  
  <p>Would you like to create another derivative component only alter, for example, a basic component behavior in the case of the example color, <code>app/my-panel.component.ts</code>:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {BasePanelComponent} from './base-panel.component'
  
  @Component({
      selector: 'my-panel',
      template: '&lt;div class="panel" [style.background-color]="color" (click)="onClick($event)"&gt;{{content}}&lt;/div&gt;',
      styles: [`
      .panel{
      padding: 50px;
    }
    `]
  })
  export class MyPanelComponent extends BasePanelComponent{
  
    constructor() {
      super();
      this.color = "blue";
    }
  }
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/bWa1JmH7NaSaJffLsl0x?p=preview" rel="noreferrer">Complete working example in Plunker</a></p>
  
  <blockquote>
    <p>Note: Obviously this example is simple and could be solved otherwise no need to use inheritance, but it is intended only to illustrate the real problem.</p>
  </blockquote>
  
  <p>As you can see in the implementation of the derivative component <code>app/my-panel.component.ts</code>, much of the implementation was repeated, and the single part really inherited was the <code>class</code> <code>BasePanelComponent</code>, but the <code>@Component</code> had to basically be completely repeated, not just the changed portions, as the <code>selector: 'my-panel'</code>.</p>
  
  <p>Is there some way to make a literally full inheritance of a component Angular2, inheriting the <code>class</code> definition of the markings/annotations, as for example <code>@Component</code>?</p>
  
  <p><strong>Edit 1 - Feature Request</strong></p>
  
  <blockquote>
    <p>Feature request angular2 added to the project on GitHub: <a href="https://github.com/angular/angular/issues/7968" rel="noreferrer">Extend/Inherit angular2 components annotations #7968</a></p>
  </blockquote>
  
  <p><strong>Edit 2 - Closed Request</strong></p>
  
  <blockquote>
    <p>The request was closed, <a href="https://github.com/angular/angular/issues/7968#issuecomment-219865739" rel="noreferrer">for this reason</a>, that briefly would not know how to merge the decorator will be made. Leaving us with no options. So my opinion is is <a href="https://github.com/angular/angular/issues/7968#issuecomment-222496110" rel="noreferrer">quoted in the Issue</a>.</p>
  </blockquote>