Template VS TemplateUrl in Angular

Back to: Angular Tutorials For Beginners and Professionals

Template VS TemplateURL in Angular

In this article, I am going to discuss Template vs TemplateURL in Angular Application with examples. Please read our previous article where we discussed the Angular Component Decorator in detail. At the end of this article, you will have a very good understanding of the following pointers.

1. What are the template and templateURL in Angular?
2. What are the different ways to create a template in Angular?
3. Differences between template vs templateURL in Angular.
4. When to use the templateUrl over template and vice-versa?

As we already in our previous articles, the @Component decorator is a function that accepts one object and this object has many properties. In this article, I am going to discuss two important properties i.e. template & templateUrl.

Different ways to create Templates in Angular

As we already discussed that the template is a part of a component that is used to render the user interface with which the end-user can interact. We can create a template in two ways. They are as follows:

1. Inline template
2. External Template

Inline Templates:

In Angular applications, the inline templates are directly specified in the component decorator using the template property. That means you need to write the required HTML inside the typescript file. Let us understand this with an example.

Open app.component.ts file and modify the component decorator as shown below. Here, you need to specify the HTML content with a pair of tilt characters.

Now, open the app.module.ts file and set the AppComponent as the startup component in the bootstrap array as shown in the below image.

Then modify the index.html page as shown below.

Now, compile the application and see the browser, and you should get the following output.

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.

Using double quotes:

You can also replace the above HTML Code within a pair of double quotes as shown below and it also work as expected.

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

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

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

In real-time most of the cases, you need to use the templateURL. So let us discuss the need and how to use the template URL in angular application.

External Template:

The External templates define the HTML in a separate file and refer to that file using templateUrl property of Component decorator. Here, the TypeScript file contains the path to that HTML file with the help of the “templateUrl” property.

When to use the template URL in angular applications?

When you have a complex view, then it is 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 and using this property you can set the external HTML file path.

By default, angular creates an HTML file with the name app.component.html within the app folder when you create a new angular project. Let us see, how to provide that HTML Path in component decorator using the templateUrl property. Please modify the app.component.ts file as shown below to use templateUrl property to set an external HTML file.

Template vs TemplateUrl in Angular:

From the application performance 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 template, you will get the intelligence support, code-completion, and formatting features of Visual Studio. 

The TypeScript code is not going to be easy to read and understand if you combined it with the inline HTML template.

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 am going to discuss Angular Nested Components with an example. Here, in this article, I try to explain the difference between Template vs TemplateURL in Angular Application with examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.