attaching dynamic templates to a component

[ss00342671]

I'm submitting a feature request

Current behavior
@component{
selector:'selector-name',
templateUrl:'url to template file'
}
Expected behavior
We should be able to get the class metadata and should be able to update its templateUrl or any key of annotations.

What is the motivation / use case for changing the behavior?
We should be able to dynamically pass the templateUrl and one component can be initialized using different templateUrl. this will help the developer to flexibly use the same component but using some other template.

Please tell us about your environment:
Any

• Angular version: 2.0.X
  Any

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[DzmitryShylovich]

We should be able to get the class metadata and should be able to update its templateUrl or any key of annotations.

metadata doesn't exist after aot compilation

[ss00342671]

I am able to fetch the component metadata using the window['Reflect'] object in constructor of the component class.

[trotyl]

I think you may be looking for something like NgTemplateOutlet or NgComponentOutlet?

[ss00342671]

@Component({
  selector: 'selector',
  templateUrl:(()=>{
	return window.keyvalue[("StateWidget"+ClassName.called)]["StateOne"]
  })()
})
export Class ClassName{
  static called:any;
 reflectOjb = window['Reflect'];
  constructor(){
           this.templateUrl = keypath[("StateWidget"+StateOneComponent.called)]["StateOne"];
       this.annotationObj = this.reflectOjb.getMetadata('annotations',this.constructor);
       this.reflectOjb.deleteMetadata('annotations',this.constructor);
       this.annotationObj[0].template = this.templateUrl;
	       this.reflectOjb.defineMetadata('annotations',this.annotationObj,this.constructor );
       this.annotation = this.reflectOjb.getMetadata('annotations',this.constructor);
           ClassName.called++;
    
  }
}

This is what I am trying to implement.

[chuckjaz]

Thank you for this feature request. Unfortunately we are not able to make this change as it would break the ability for applications to be compiled ahead of time which drives much of our optimizations and code size reduction effort.

To improve the ability to dynamically select components at runtime we are introducing NgComponentOutlet that will address much of what you could do by changing the template dynamically (#13383).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}