In this post we are going to see how to set the relative url for the template of angular2 component. First we have to understand the concepts of loading templates in Angular2 Component.Normally when you see the component if you have the TemplateUrl where we will specify the path which will starts from the path what we specified in the system.config.js, for Example in below example we can see the for a star rating component we have html which is also in the same directory but it is specified from the root path.
From the above example you can see the output of that configuration.
Star Rating Component is a reusable component, here we have one issue, whenever we are adding this another project we have to configure it in the same path because it is specified from the root, so what we can do is, we change the path to relative path ,relative to component location.
Now we got one issue, template is not loaded because it is mapped related to the root server path,
Now how we can fix this issue,we have to tell the component to have moduleId, which will help the component to load the template with relative to the component location.
Now see the output:
From this post you can see how to load the template in Angular2 component with relative path.
From the above example you can see the output of that configuration.
Star Rating Component is a reusable component, here we have one issue, whenever we are adding this another project we have to configure it in the same path because it is specified from the root, so what we can do is, we change the path to relative path ,relative to component location.
Now we got one issue, template is not loaded because it is mapped related to the root server path,
Now how we can fix this issue,we have to tell the component to have moduleId, which will help the component to load the template with relative to the component location.
Now see the output:
From this post you can see how to load the template in Angular2 component with relative path.
No comments:
Post a Comment