Difference between Template and TemplateURL in AngularJS

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.

The 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a
    placeholder and can be replaced.-->
import { Component } from '@angular/core';
  
@Component({
    selector:'app-root',
      
    template:`<h3>Hello World</h3>`
     
})
export class AppComponent {
title = 'MyAngularApp'

chevron_right


Also, open the app.module.ts file and set the AppComponent to the start-up component in the bootstrap array as shown in  below.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a
    placeholder and can be replaced.-->
@NgModule({
   declaration:[
     AppComponent,
     MyComponentComponent,
  ];
      
    imports: [
       BrowseModule,
       AppRoutingModule
   ],
    providers: [],,
    bootstrap : [AppComponent]
    })
export class AppModule { }

chevron_right


Then modify the index.html page as shown below.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a 
    placeholder and can be replaced.-->
<!Doctype html>
    <html lang ="en">
    <head>
    <meta charset ="utf-8">
    <title>MyAngularApp</title>
    <base href="/">
    <meta name="viewport" 
          content="width=device-width, 
                   intial-scale=1">
    <link rel="icon" 
          type="image/x-icon"
          href="favicon.ico">
    </head>
    <body>
      
    <app-root></app-root>
      
    </body>
    </html>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a 
placeholder and can be replaced.-->
@Component({
    selector: 'app-root',
      
    template: '<h3>Hello World</h3>'
      
}) 

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a 
    placeholder and can be replaced.-->
@Component({
    selector: 'app-root',
      
    template: "<h3>Welcome to GeeksforGeeks</h3>"
})

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a 
    placeholder and can be replaced.-->
@Component({
    selector: 'app-root',
      
    template:`<h3>Let’s learn About the Angularjs.  
                  It is easy to understand.</h3>`
      
})

chevron_right


When we are using backticks output will be:

External Template:

In real-time most of the 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--The content below is only a 
    placeholder and can be replaced.-->
    import { Component } from '@angular/core';
  
@Component({
    selector:'app-root',
      
    templateUrl:'app/app.Component.html'
      
})
      
    export class AppComponent {
    title = 'MyAngularApp';
}

chevron_right


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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.