angular2 extend component but keep template
<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>