angular 11 tutorial for Beginners, Template and TemplateUrl in Angular,t...

                 

template VS templateUrl In Angular

Introduction

 

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

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

1. import { Component } from '@angular/core';  
2.   
3. @Component({  
4.   selector: 'app-root',  
5.   template:'<h1>Hello, {{name}}</h1>',  
6.   styleUrls: ['./app.component.css']  
7. })  
8. export class AppComponent {  
9.   title = 'DemoApplication';  
10.   name='Ashish Mishra';  
11. }  

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

1. Inline template
2. 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.

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

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.

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

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

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

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.

1. <div style="text-align:center">  
2.   <h1>  
3.     Hello,{{name}}.  
4.     Welcome to {{ title }}!  
5.   </h1>  
6. </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.

1. import { Component } from '@angular/core';  
2.   
3. @Component({  
4.   selector: 'app-root',  
5.   templateUrl: './app.component.html',  
6.   styleUrls: ['./app.component.css']  
7. })  
8. export class AppComponent {  
9.   name="Testy Codeiz";  
10.   title = 'angular 11 programming.';