title: angular2 extend component but keep template
body: <p>Is there a way to extend/inherit from angular2 components?</p>
  
  <p>Let's say (for the sake of simplicity) I have a <code>Button</code> component. Based on this component I want to extend it to a <code>RedButton</code> component but use the same template and initialization methods but only change what happens when the user presses the button. How is this possible?</p>
  
  <hr>
  
  <p>Here is what I tried so far:</p>
  
  <p>button.component.ts</p>
  
  <pre><code>import {Component, View} from 'angular2/core';
  
  @Component({
      selector : 'my-button'
  })
  @View({
      template : '&lt;button (click)="clicked()"&gt;Click&lt;/button&gt;'
  })
  export class ButtonComponent {
  
      constructor() {
      }
  
      public clicked(event) {
          console.log('Base clicked');
      }
  }
  </code></pre>
  
  <p>redbutton.component.ts</p>
  
  <pre><code>import {Component, View} from 'angular2/core';
  
  import {ButtonComponent} from './button.component';
  
  @Component({
      selector : 'my-redbutton'
  })
  // typescript complaints here, that RedButton needs a View and template
  export class RedButtonComponent extends ButtonComponent {
  
      constructor() {
          super();
      }
  
      public clicked(event) {
          console.log('RED clicked');
      }
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {ButtonComponent} from './button.component';
  import {RedButtonComponent} from './redbutton.component';
  
  @Component({
      selector: 'coach-app',
      directives : [ButtonComponent, RedButtonComponent],
      template: '&lt;h1&gt;Button Test App&lt;/h1&gt;&lt;my-button&gt;&lt;/my-button&gt;&lt;my-redbutton&gt;&lt;/my-redbutton&gt;'
  })
  export class TestAppComponent { }
  </code></pre>