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: –
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.
Also, open the app.module.ts file and set the AppComponent to the start-up component in the bootstrap array as shown in below.
Then modify the index.html page as shown below.
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.
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
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
When we are using backticks output will be:
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.
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.
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.
- Difference between ng-container and ng-template in AngularJS
- AngularJS | ng-bind-template Directive
- Difference between Angular and AngularJS
- Difference between Bootstrap and AngularJS
- Difference between NodeJS and AngularJS
- Difference between VueJS and AngularJS
- What is the Difference between Constructor and ngOnInit in AngularJS ?
- What's the difference between ng-pristine and ng-dirty in AngularJS?
- Difference between declarations and entryComponents in AngularJS
- What is the difference between $watch and $observe in AngularJS ?
- Difference between Directive and Component in AngularJS
- HTML | template Tag
- CSS | grid-template Property
- Use EJS as Template Engine in Node.js
- What is the use of Angular 2 hashtags in template ?
- How to use underscore.js as a template engine ?
- Email Template using HTML and CSS
- CSS | grid-template-columns Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.