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

After playing around with it. A simple extend will work for my use case.

Basically I created a class that extends the thirdPartyClass.

What happens here is that I am overwriting the template for the thirdPartyClass by creating my own selector and importing only the class.

Something like this:

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

@Component({
  selector: 'my-selector',
  template: '
my template
'
})

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

Notes:

• If you are using this method, don't forget to import any pipes that are used in the thirdPartyClass template.
• If the functionality is updated in the thirdPartyClass that depends upon the template, you'll need to update by hand.
• I prefered this solution to refering to the ReflectMetaData because its a simple extend instead of accessing the annotations and force changing it.