The templateUrl property is component metadata that points Angular to the external HTML file used as the component’s template. Angular uses that file as the component’s rendered content while the component class supplies its data and binding logic. section 2.3.3 section 9.6.2
A typical component configuration connects the template file with the component and its styling:
- Place the HTML content in the referenced file; Angular processes elements and data bindings when the template is displayed. section 9.4.4 section 9.6.2
- Pair templateUrl with selector, which identifies the HTML element Angular replaces or populates, and styleUrls, which identifies CSS files for the generated elements. section 2.3.3 section 9.4.4
External templates in two components
An AppComponent can use templateUrl: './app.component.html', while a ProductComponent can use templateUrl: 'template.html'. In both cases, the referenced HTML supplies the component’s contents, and class properties such as count can provide values for bindings.
