How can I have dynamic templateUrl for Angular2 Component?

Viewed 7879

I wanted to load component templateUrl based on value passed from parent component. I know tt can be pass through property binding to component by have @Input, I gave example below in which myHtml will be passed as templateName.

.But there is no ability to access @Input value inside templateUrl function. I think templateUrl is the first thing going to evaluate by asking for HTML, after that all other component code gets executed.

Like in angular 1 has ability to pass some value from attribute, & then I can use that value inside templateUrl function as a parameter like below.

templateUrl: function(element, attrs){
    //was getting value
    return '/app/templates/'+ attrs.myTemplateName + '.html'
}

But same thing I can't do in Angular2, as templateUrl is strongly typed as string so it doesn't take function as an attribute.

Is there a way to achieve this OR I missed something simple?

Edit

I've already looked at this answer which isn't what I want. In referred answer, it render DOM using DynamicComponentLoader which loads another component.

This is not what I wanted, because creating new separate component for having different templateUrl doesn't make sense in mine case.

Any idea how do I implement this?

1 Answers
Related