Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2: How to override components template?

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?

like image 494
rrecaredo Avatar asked Apr 16 '16 16:04

rrecaredo


1 Answers

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.

like image 115
alexKhymenko Avatar answered Nov 15 '22 23:11

alexKhymenko