A component template defines the HTML content an Angular component presents. The component supplies the data and logic; bindings in the template connect them to rendered elements. Angular processes those bindings and uses the DOM API to create the content displayed by the browser. section 9.6.2 section 10.2
Choose where to define the template based on its size:
- Use `template` in the `@Component` decorator for a small inline HTML fragment. A TypeScript backtick string can preserve a multiline layout, but larger inline templates become hard to read. section 16.2.2
- Use `templateUrl` to point to a separate HTML file when the markup grows beyond a few simple elements. This also lets an editor treat the file as HTML. section 16.2.2
Display a component value
In `template.html`, `<div>There are {{ count }} products in the model</div>` displays the value of a component’s `count` getter. Double braces mark an interpolation binding: Angular evaluates the expression and inserts its result. A misspelled or missing property can produce a template compilation error, just as an error in a code file can. section 9.6.2 section 2.3.2
Templates also assemble components. Angular matches a component’s selector to a host element; a parent template can contain child host elements, whose own templates supply their content. Splitting a large form-and-table template into separate components makes those features easier to isolate, test, and maintain. section 16.2.1 section 16.2
Bindings can do more than insert text. A product-table template repeats rows with `*ngFor`, displays values with interpolation and a currency pipe, and calls component methods through button click bindings. Parent templates can pass data through input bindings and handle child output events. section 20.4.2 section 16.2.2
