template VS templateUrl In Angular

Introduction

This article will explain the difference between template and templateUrl in angular. We will discuss these with examples.

What is the templateUrl?
What are the differences between the template and templateUrl Angular Components?
When to use template over templateUrl and vice-versa?

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

In the above component, we used 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 applications.

Different ways to create template in Angular

A template is a part of a component which is used to render the user interface in a web page. In Angular, we can create a template in two possible ways

Inline template
Template in an external file

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

@Component({
selector: 'app-root',
template:'<h1>Hello, {{name}}</h1>',
styleUrls: ['./app.component.css']
})

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.

@Component({
selector: 'app-root',
template:'<h1>Hello, {{name}}</h1>',
styleUrls: ['./app.component.css']
})

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

@Component({
selector: 'app-root',
template:"<h1>Hello, {{name}}</h1>",
styleUrls: ['./app.component.css']
})

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.

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

@Component({
selector: 'app-root',
template:`<h1>
Hello, {{name}}
</h1>`,
styleUrls: ['./app.component.css']
})

Now, we are using inline template to render the view. But in real time, in most of the cases, you need to use the templateUrl. So, let us discuss the need and how to use templateUrl in an Angular application.

When to use templateUrl in Angular 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.

Step 1

Click on app folder under the "src" folder of application and open app.component.html.

<div style="text-align:center">
<h1>
Hello,{{name}}.
Welcome to {{ title }}!
</h1>
</div>

Step 2

Open the app.component.ts file. You will see the templateUrl property of the component decorator to the path of app.component.html.

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

Angular2 Template vs TemplateUrl and when do we need to use one over the other?

From the application's 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.

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); otherwise, 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 Code. But with an external view template, you will get the intelligence support, code-completion, and formatting features of Visual Studio Code.

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.