Skip to content
Related Articles

Related Articles

Improve Article

Difference between Template and TemplateURL in AngularJS

  • Last Updated : 08 Oct, 2021
Geek Week

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.

HTML




<!--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'

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




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

Then modify the index.html page as shown below.

HTML




<!--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,
                   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




<!--The content below is only a
placeholder and can be replaced.-->
@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




<!--The content below is only a
    placeholder and can be replaced.-->
@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




<!--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>`
     
})

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




<!--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';
}

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
Recommended Articles
Page :