Explain Template VS Template URL in Angular

The @Component is a Decorator is which accepts an object and this object includes properties. The two important properties are Template and TemplateURL. In fact, these are among the most essential features of Angular 9.

What is a Template?

A template is an HTML piece that tells Angular a way to render the component in an angular application.

A template is a part of a component that is used to render the user interface on a web page. 

The template is a part of a component that’s used for the user interface by which the end-user can interact easily.

By using a template in angular you will be able to specify inline HTML for a component. If you use a template, you don’t need to give an external path of HTML file.

We can specify the view inside the HTML tags and there are some ways to define the templates in Angular components.

Templates are one of the most essential parts of the angular component because it allows us to define the UI for the component.

There are two ways in which we can create template:

1. Inline template
2. External template

Inline Template:

If we define the template for the component in the .ts file it is known as an inline template. The inline templates are specified using the “template” property in the component decorator. It determines to write the required HTML code inside the typescript file.

The inline template is defined by placing the HTML code in single quotes (‘’), double quotes (“”) or backticks (“) and is linked to the component metadata using the template property. of @Component decorator.

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<h1>Hello World!!</h1>',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'template-test';
}

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: "<h1>Hello World!!</h1>",
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'template-test';
}

Outputs of both the above code will be the same as shown in the below image:

Figure 1-Output using single and double quotes

You can include the 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 above.

When we have multiple lines of HTML code, we cannot use single quotes or double quotes as it gives compile-time error as shown in the below screenshot.

Figure 2 Compile-time error

To avoid this kind of error, we need to include the HTML code within backticks (tilt) as shown below.

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1>Hello World!!</h1>
  <h2>Welcome</h2>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'template-test';
}

The output of the above code will be as shown in the following image:

Figure 3-Output using template

External Template:

When we define template in an external file and then we link it with our component it is known as External Template.

We define an external template using the “templateUrl” property.

In simple words, the External templates specify the HTML code in a separate file and we will refer to that file using the “templateUrl” property of the @Component decorator. We can specify the path of the HTML code file using the “templateUrl” property in the Typescript file.

When do we need to use the templateURL in Angular?

It is recommended by angular to create a complex view in a separate HTML file instead of including it as an inline template. The component decorator has a property of templateUrl using which we can set the external HTML code file path in this property.

The template is determined in a separate HTML file and this file is linked to the component metadata using the @Component decorator’s templateUrl property.

When we create a new project, angular automatically creates an HTML code file named app.component.html in the app folder. Consider the following example to understand how to provide an HTML code path using the templateUrl property in the component decorator inside the .ts file. Set the templateUrl property in the app.component.ts file to set an external HTML file as shown below.

app.component.html:

<h1>Hello World!!</h1>
<h2>Welcome</h2>

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'template-test';
}

There will be no difference in the output where we use template or we use templateUrl.

As we have written the same code in the app.component.html file as in the template property using backticks earlier, there will be no difference in both outputs.

Figure 4-Output using templateUrl

Template vs TemplateUrl in Angular:

In terms of the performance of an application, there is no such real difference between template and templateUrl. But, there are a few differences from the developer’s point of view.

It is recommended by angular that when you are working with a complex view, for instance, view with more than 5 lines, then you should consider using templateUrl (use an external file); otherwise, in the case of smaller and simpler HTML code, you can use template (inline HTML) property of component decorator.

You are not able to access the features of Visual Studio such as intelligence support, code completion, and formatting functions if you use an inline template. But if you use templateUrl (external template) you will get the features of VS code like intelligence support, code completion, and formatting. It is better to have these features for faster coding and syntax error prevention.

It is convenient to have typescript code and associated HTML code in the same file to make it less complicated and easier to find how both are related.

The typescript can become tough to read and understand if you have combined the .ts file code with the inline HTML template.

Conclusion

From the above discussion, we can say that there is no such difference between template and templateUrl properties of the component decorator. But it is recommended by Angular in which situation to use template and in which scenario to use templateUrl. i.e., if you have a small line of code for a component then use template property and if you have complex and multiple lines of HTML code then use templateUrl. It is always better to get features of VS code like intelligence support, code completion, and formatting for faster coding and syntax error prevention.

I am working as a Digital Marketing Manager in a reputed PowerPoint Add-in Development Company. I’ve worked in the information technology, services, and product industries as a technical writing enthusiast and a goal-oriented professional with refined communication abilities. I’m a high-energy person who genuinely enjoys what I do and strives to improve every day.