Templates
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>
Inline templates
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>" })
Isolated templates
Isolated templates are used mostly when the template contains more contents. In...