Angular2 expand component but save template

Question

Is there any way to extend / inherit from angular2 components?

Say (for simplicity), I have a Button component. Based on this component, I want to expand it to the RedButton component, but use the same template and initialization methods, but only change what happens when the user clicks a button. How is this possible?

---

Here is what I have tried so far:

button.component.ts

 import {Component, View} from 'angular2/core'; @Component({ selector : 'my-button' }) @View({ template : '<button (click)="clicked()">Click</button>' }) export class ButtonComponent { constructor() { } public clicked(event) { console.log('Base clicked'); } } 

redbutton.component.ts

 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'); } } 

app.component.ts

 import {Component} from 'angular2/core'; import {ButtonComponent} from './button.component'; import {RedButtonComponent} from './redbutton.component'; @Component({ selector: 'coach-app', directives : [ButtonComponent, RedButtonComponent], template: '<h1>Button Test App</h1><my-button></my-button><my-redbutton></my-redbutton>' }) export class TestAppComponent { } 

Answer 1

Class extension and template inheritance (currently?) Is not supported. What you can do is use DI to configure your component.

 interface ButtonBehavior { component:any; onClick(event); } class DefaultButtonBehavior implements ButtonBehavior { component:any; onClick(event) { console.log('default button clicked'); } } class FancyButtonBehavior implements ButtonBehavior { component:any; onClick(event) { console.log('default button clicked'); } } class ButtonComponent { constructor(private buttonBehavior:ButtonBehavior) { buttonBehavior.component = this. } } bootstrap(AppComponent, [provide(ButtonBehavior, {useClass: FancyButtonBehavior})]) 

Inputs and outputs will require additional wiring, so they are not too convenient, but doable.