What are templates in Angular?

A template is a kind of HTML that instructs Angular about how to display a component. An Angular HTML template, like conventional HTML, produces a view, or user interface, in the browser, but with far more capabilities. Angular API evaluates an HTML template of a component, creates HTML, and renders it.

There are two ways to create a template in an Angular component:

Inline Template
Linked Template

Inline_Template: The component decorator's template config is used to specify an inline HTML template for a component. The Template will be wrapped inside the single or double quotes.

Example:

@Component({
selector: "app-greet",
template: <div>
<h1> Hello {{name}} how are you ? </h1>
<h2> Welcome to interviewbit ! </h2>
</div>
})
Linked_Template: A component may include an HTML template in a separate HTML file. As illustrated below, the templateUrl option is used to indicate the path of the HTML template file.

Example:

@Component({
selector: "app-greet",
templateUrl: "./component.html"
})