An external template keeps a component’s HTML in a separate file instead of an inline `template` string. Use one when the markup grows beyond two or three simple elements: separating HTML from TypeScript makes both easier to read and lets an editor provide HTML-aware highlighting. section 16.2.2
Connect a component to its HTML
Put `<div class="bg-info p-2">This is an external template</div>` in `productTable.component.html`. In `productTable.component.ts`, set `@Component({ selector: "paProductTable", templateUrl: "productTable.component.html" })`. The `templateUrl` value identifies the HTML file; it replaces the inline `template` property. section 16.2.2
Keep two practical consequences in mind:
- External templates add files to manage. Pair names consistently, such as `productTable.component.ts` and `productTable.component.html`, so the association is clear. section 16.2.2
- In a unit test, explicitly call `TestBed.compileComponents()` during setup. Compilation processes the external HTML asynchronously, so use its returned Promise with `waitForAsync` and `beforeEach` before completing setup. section 29.4.3
