Difference between Template and TemplateURL in AngularJS
Last Updated :
15 Feb, 2023
As we know that, the @Component decorator is a function that accepts one object and that object has many properties. The major two important properties are template & template URL.
There are various Method to create Templates in Angular
The template is a part of a component that is used for the user interface by which the end-user can interact easily. We can create a template in two ways are follow: –
- Inline template
- External Template
Inline Templates:
When we define the template for the component in a .ts file it is known as an inline template the inline templates are defined in the component decorator using the template property. It refers to write the required HTML inside the typescript file. Let us consider an example.
Open the app.component.ts file and modify the component decorator which as shown below. Here, you need to define the HTML content with the help of tilt characters.
HTML
import { Component } from '@angular/core';
@Component({
selector:'app-root',
template:`<h3>Hello World</h3>`
})
export class AppComponent {
title = 'MyAngularApp'
|
Also, open the app.module.ts file and set the AppComponent to the start-up component in the bootstrap array as shown in below.
HTML
@NgModule({
declaration:[
AppComponent,
MyComponentComponent,
];
imports: [
BrowseModule,
AppRoutingModule
],
providers: [],,
bootstrap : [AppComponent]
})
export class AppModule { }
|
Then modify the index.html page as shown below.
HTML
<!Doctype html>
<html lang ="en">
<head>
<meta charset ="utf-8">
<title>MyAngularApp</title>
<base href="/">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="icon"
type="image/x-icon"
href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
|
Now, compile the application and you will get the following output.
Can’t we include the HTML code inside single or double quotes?
Yes, we can include the above HTML code inside a pair of either single quotes or double quotes or till when the HTML code is in a single line as shown below.
Here we are using single quotes.
HTML
@Component({
selector: 'app-root',
template: '<h3>Hello World</h3>'
})
|
When we are using Single quotes output will be:
Using double quotes:
You can also replace the above HTML Code inside a pair of double quotes as shown below
HTML
@Component({
selector: 'app-root',
template: "<h3>Welcome to GeeksforGeeks</h3>"
})
|
When we are using Double quotes output will be:
When we will use tilt instead of either single quotes or double quotes?
When we have multiple lines of HTML code then we need to use the tilt otherwise you will get a compile-time error.
In order to get rid of this error, we need to use backticks (tilt) as shown in the below
HTML
@Component({
selector: 'app-root',
template:`<h3>Let’s learn About the Angularjs.
It is easy to understand.</h3>`
})
|
When we are using backticks output will be:
External Template:
In real-time most cases, we need to use the templateURL. When we define the template in an external file and then after we link with our component is said to be an external template.
In other words, The External templates define the HTML code in a separate file and we can refer to that file using templateURL property of Component decorator. The TypeScript file contains the path of the HTML code file using the “templateURL” property.
When we need use the templateURL in angular?
When we are working with 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 the property of templateUrl and using this property we can set the external HTML code file path.
By default, Angular creates an HTML code file with the name of app.component.html inside the app folder when we create any new angular project. Let us consider an example to understand How to provide that HTML code Path in component decorator using the templateUrl property. Also, do modify the app.component.ts file as shown below to use templateUrl property to set an external HTML file.
HTML
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'app/app.Component.html'
})
export class AppComponent {
title = 'MyAngularApp';
}
|
When we refer the code of app.component.html file to the app.component.ts file using TemplateURL then output will be:
Template vs TemplateUrl in Angular:
In AngularJS, we can define the view inside the HTML tags and there is various method to define the templates in angular components.
Templates are one of the most essential parts of angular component because it allows us to define the UI for the component, we can have 2 ways to define the template.
- Inline template
- External Template
There are no such real differences between the template and templateUrl property in a term of performance of an application. But from the developer’s point of view, there are some differences which we will discuss here.
In Angular, when we have a complex view then we should go with templateUrl (using an external file) otherwise we can use the template (inline HTML) property of the component decorator.
When we use an inline template, then we do no longer have the intelligence support, code-completion, and formatting features of Visual Studio. But with an outside template, we will have the intelligence support, code-completion, and formatting functions of Visual Studio as well. The TypeScript code isn’t always to study and recognize if we combined it with the inline HTML template. There is a convenience thing to having the typescript code and the associated HTML in the same record because it turns into much less complicated to peer how they are associated with each other.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...