Angular 2 override components

Question

I am from Laravel world and a bit new to Angular 2 world, and i am having a hard time to figure out:

Is it possible to override a component or it's template in Angular 2 like we use to override the views of the vendor/custom package in Laravel?

This is a dummy folder structure that might express what i mean to ask:

|-resources
   |-assets
      |-typescript
         |-core
            |-core.component.ts    //overridded core component and template
            |-core.template.html
|-Modules
   |-Core
      |-Resources
         |-assets
            |-typescript
               |-core
                  |-core.component.ts  //main module component and template
                  |-core.template.html

core.template.html (Original)

<div>
    <p> This is a core component's template</p>
    <button>Click me! </button>
</div>

core.template.html (Overridden)

<div>
    <p> This is a overridden core component's template</p>
    <p> Removed the button and overridden with p-tag </p>
</div>

Hope i have clearly illustrated the problem i am facing.

It depends on the case, but at least for some of them this may be solved with conditional import of NgModule that contains a concurring component. — Estus Flask, Nov 22 '16 at 06:59

score 0 · Answer 1 · answered Nov 22 '16 at 06:02

Overriding the teamplete of the component is till an open issue with Angular 2

Information from : https://github.com/angular/angular/issues/11144

But for now you can use Reflect to change metadata of component.

import {Component} from 'angular2/core'

@Component({
  selector: 'thirdpartycomp',
  providers: [],
  template: `Hello From Third Party App!`,
  directives: []
})
export class ThirdParty{}

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

@Component({
  selector: 'my-app',
  directives: [ThirdParty],
  template: `<thirdpartycomp></thirdpartycomp>`,
})
export class App {}

Angular 2 override components

1 Answers1