Template and TemplateUrl in Angular 11

In this tutorial we will discuss template and templateurl properties of the Component decorator.

As we have already discussed in our previous video that @Component decorator is a function that accepts one object and this object has many properties. In this video, will discuss two important properties i.e. template and templateUrl.

In angular we need to create the html or view to represent the data or accept the data from the user.  We can create the template as.

• • • Inline template
    • External Template

Using Inline Templates

The inline templates are directly specified in the component decorator using the template property. That means you need to write the required HTML inside the typescript file. All your html creating like forms, controls and javascript should be added inline it self.

lets modify the app.component.ts file and we need to add the below HTML content with a pair of tilt characters inside the component decorator template property.

@Component({
  selector: 'app-root',
  template: 'Welcome to angular 11 template example - by Gtechfluent',
  styleUrls: ['./app.component.scss']
})

Can we use single or double quotes?.

Yes, we 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. below is single quote example.

@Component({
  template: 'Welcome to angular 11 template example - by Gtechfluent',
})

Simply replace single quotes with double quotes.

@Component({
  template: "Welcome to angular 11 template example - by Gtechfluent",
})

When should we use backticks instead of single or double quotes?

The obvious next question that comes to our mind is when should we use backticks instead of single or double quotes.

In our current inline html template we have single line content and if try to make it as a double line as shown below. In this case we will get the compile error.

If you have the HTML in more than one line, then you have to use backticks instead of single or double quotes as shown below. If you use single or double quotes instead of backticks you will get an error.

@Component({
  selector: 'app-root',
  template: `

Important points that we need to understand about inline templates.

1. 1. 1. 1. We don’t have as Visual Studio editor intellisense, code-completion and formatting features.
         2. TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.

Instead of using an inline view template, In real-time application we need use a separate HTML file or external template.

Using External templates

The External templates define the HTML in a separate file and refer to that file using templateUrl property of Component decorator. Here, the TypeScript file contains the path to that HTML file with the help of the “templateUrl” property.

When we create an application the angular creates an HTML file with the name app.component.html within the app folder which is by default created.

We need to use the “templateUrl” property for referring to external templates or views for component.

Manually adding the  app.component.html file.

1 : Right click on the “app” folder and add a new HTML file. Name it “app.component.html”.

2 : Include the required HTML into the “app.component.html”

3 : In “app.component.ts”, reference the external view template using templateUrl property as shown below. Notice instead of the “template” property we are using “templateUrl” property. 

Important points that we need to understand about external templates.

1. 1. 1. 1. We have Visual Studio editor intellisense, code-completion and formatting features.
         2. Not only the code in “app.component.ts” is clean, it is also easier to read and understand

Note:  It is recommended by angular that create as an external HTML File instead of an inline template for your complex html content.

When to use template and templateUrl?

• • • If you have small lines of code for a component then use template property.
    • If you have complex and many lines of HTML code then it is recommended to use templateUrl.
    • If you use template then you will not get the feature of VS Code like intelligence support, code-completion, and formatting. 
    • if you use templateUrl you will get the feature of VS Code like intelligence support, code-completion, and formatting. It is always better to have a feature like intelligence support, code-completion, and formatting for faster coding and syntax error preventions.

You can watch our video version of this tutorial with step by step explanation.