Lecture-6: template & templateUrl ;style & styleUrls in Angular Component
We know that the @Component decorator functions take an object and this object contains many properties. So we will learn about the properties of the template & templateUrl in this article.
We can render our HTML code within the @Component decorator in two ways.
The Inline templates are specified directly in the component decorator. In this, we will find the HTML inside the TypeScript file. This can be implemented using the "template" property.
The literal values of the template with back-ticks marks allow strings on multiple lines. It means that if you have HTML on more than one line, you should use backticks instead of single or double quotes, as shown below.
The External templates define HTML in a separate file and refer to this file in templateUrl.means. In this, we will find a separate HTML file instead of finding the HTML inside the TS file. Here, the TypeScript file contains the path to that HTML file with the help of the "templateUrl" property.
The Inline Style are specified directly in the component decorator. In this, you will find the CSS within the TypeScript file. This can be implemented using the "styles" property.
The External styles define CSS in a separate file and refer to this file in styleUrl.means In this, we will find a separate CSS file instead of finding a CSS within the TypeScript file. Here, the TypeScript file contains the path to that style sheet file with the help of the "stylesUrls" property.