Angular2: How to override components template?

Question

I am considering migrating an angular 1.4 application to angular 2 and I wonder if it will be possible to override components' template like we do in angular1 using $provide.decorator (like Can you override specific templates in AngularUI Bootstrap?).

I am looking for something like TestComponentBuilder.overrideTemplate but for a non-testing scenario. Does Angular2 comes with something similar?

Solution

Check out this answer from stackoverflow Override/extend third-party component's template. The main idea is you can write your own component and extend third party component.

import {component} from 'angular2/core';
import {thirdPartyClass} from 'example/example';

@Component({
  selector: 'my-selector',
  template: '<div>my template</div>'
})

export class MyOwnComponent extends thirdPartyClass {
  constructor() {
     super()
  }
}

But there are downsides :

1. It will still compile original component.
2. If you are using this method, don't forget to import any pipes that are used in the thirdPartyClass template.

3. If the functionality is updated in the thirdPartyClass that depends upon the template, you'll need to update by hand.

   Subscribe to this Github Issue for further updates.

Comments

[alexKhymenko]

Fixed the issues.