Angular2 Template VS Templateurl 

Angular2 Template VS Template URL

In this article, I am going to discuss the difference between Angular2 Template vs TemplateURL with examples. Please read our previous article before proceeding to this article where we discussed the Angular 2 Components in details. At the end of this article, you will have a very good understanding of the following three things

  1. What is the template URL?
  2. What are differences of between Angular2 template vs templateURL in Angular 2 Component?
  3. When to use the template over template URL and vice-versa?

In the previous article, we have created the following component i.e. AppComponent. You can find this component within the app folder which is present inside the src folder of your application.

Angular2 Template VS Templateurl

In the above component, we use something called template to render the page i.e. the user interface with which the end user can interact. Let’s discuss the different ways to create templates in angular 2 applications.

Different ways to create Templates in Angular

As we already discussed that the 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:

  1. Inline template
  2. Template in an external file

In Angular 2 applications, the inline templates are directly specified within the component using the template property. The below is an example of an angular inline template.

Angular2 Template VS Templateurl

In the above example, we specified the HTML content with a pair of tilt characters.

Can’t we include the above HTML code within single or double quotes?

Yes, you can include the above HTML code within a pair of either single quotes or double quotes as long as your HTML Code is in a single line as shown below. Here we are using single quotes.

Angular2 Template VS Templateurl

Replacing the above HTML Code with double quotes and it should work as expected.

Angular2 Template VS Templateurl

When to use tilt instead of either single quotes or double quotes?

When you have multiple lines of HTML code then you need to to use the tilt otherwise you will get a compile-time error as shown in the below image. 

Angular2 Template VS Templateurl

To overcome the above error, you need to use backticks (tilt) as shown in the below image.

Angular2 Template VS Templateurl

As of now, we are using the inline template to render the view. But in real time most of the cases you need to use the template URL. So let us discuss the need and how to use template URL in angular 2 application.

When to use template URL in angular 2 applications?

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.

Steps to follow to use external HTML File with template URL

Step1: Right click on the “app” folder in solution explorer and then add a new HTML file with the name it “mycomponent.html”.  Then copy and paste the below HTML code in it.

<h1>
    Hello {{name}}
</h1>

Step2: Open “app.component.ts” file. Set the templateUrl property of the component decorator to the path of the external HTML file that we just created as shown in the below image.

Angular2 Template VS Templateurl

With the above changes, now run the application and you will get the output as expected as shown below.

Angular2 Template VS Templateurl

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.

In the next article, I will discuss angular2 nested components with an example.

SUMMARY:

In this article, I try to explain the difference between Angular2 Template vs TemplateURL with examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *