You will have noted that we have added inline markups for a view or template when annotating the component. We can also add a template URL isolating the view, or template markups in a separate HTML file, instead of having it as an inline view or template.
A template comprises HTML tags that provide information to Angular on rendering the components. A simple template content is given in the following lines of code. It renders the name of the book and publisher:
<div>
The Name of the book is {{bookName}} and is published by {{pubName}}.
</div> An inline template is used when there is a need to render very simple content, such as a one-liner, for example. In such cases, inline views or templates will be defined directly in the annotation:
@Component({
selector: 'first-component',
template: "<div>{{getGreetingPhrase()}} {{name}}</div>"
})