12

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?

Al-Mothafar
  • 7,949
  • 7
  • 68
  • 102
rrecaredo
  • 121
  • 1
  • 1
  • 5
  • You mean for reusing a component with several different templates? – Günter Zöchbauer Apr 16 '16 at 16:13
  • Sure you can, see this [answer](http://stackoverflow.com/questions/36660376/angular2-web-vs-mobile-templateurl/36660838#36660838). – kemsky Apr 16 '16 at 16:49
  • Thank you, Unfortunately, most of the components the components whose template I'd like to override, come from 3rd party libraries (i.e. angular-ui). – rrecaredo Apr 17 '16 at 17:03
  • I believe there might be something like [link](http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview) – rrecaredo Apr 17 '16 at 17:11

1 Answers1

10

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.

alexKhymenko
  • 5,450
  • 23
  • 40