In this article we will discuss what is the difference between Template VS Templateurl in angular. Before going through please follow the previous article >> What is the template URL ? >> What are differences of between Angular template vs templateURL ? >> When to use the template over template URL and vice-versa ?Different ways to create Templates in Angular
Template is a part of a component which is used to render user interface in a web page. In Angular we can create a template in two possible ways:
- Inline template
- Template in an external file
The inline templates are directly specified within the component using the template property. The below is an example of an angular inline template. Here we specified the HTML content with a pair of tilt characters.
- You can include the above HTML code within a pair of either single quotes or double quotes as long as your HTML Code.
- When you have multiple lines of HTML code then you need to to use the tilt otherwise you will get a compile-time error.
Template in external file
When you have a complex view, then it recommended by angular to create that complex view in an external HTML File instead of an inline template. The angular component decorator provides a property called templateUrl. This property takes the path of an external HTML file.
NOTE: It is always better to keep the template and the component in the same folder.
When you run the application you can see the angular 8 application output look like below;
Angular2 Template vs TemplateUrl and when do we need to use one over the other ?
From the applications point of view, there are no such real differences between the template and templateUrl property. But from the developer’s point of view, there are some differences that we will discuss here.
- According to Angular, when you have a complex view (i.e. a view with more than 3 lines) then go with templateUrl (use external file) else use the template (inline HTML) properly of the component decorator.
- When you use an inline template, then you will lose the intelligence support, code-completion, and formatting features of Visual Studio. But with an external view template, you will get the intelligence support, code-completion, and formatting features of Visual Studio.
- There is a convenience factor to having the typescript code and the associated HTML in the same file because it is easier to see how the two are related to each other.
Summary
In this tutorial we discussed Angular Template VS Templateurl . If have any question related to this topic then give your feedback.
Post a Comment