Override/extend third-party component's template

Question

I am currently importing a third party component. For my use case I need to override that specific component template.

Since this is a third party component, and import

Answer 1

You can use Reflect to change metadata of component. Here's the super simple example:

import {Component} from 'angular2/core'

@Component({
  selector: 'thing',
  template: `Hi!`,
})
export class Thing {}

annotations = Reflect.getMetadata('annotations', Thing);
for (let i = 0; i < annotations.length; i += 1) {
  if (annotations[i].constructor.name === 'ComponentMetadata') {
    annotations[i].template = 'Ho!';
    break;
  }
}

@Component({
  selector: 'my-app',
  directives: [Thing],
  template: ``,
})
export class App {}

Just make sure you update template before injecting it into parent component. Also check which metadata you need to access, might be DirectiveMetadata in your case.