Angular - 2-8 Working with component templates

So far every component we built relied on an external template file referenced through templateUrl. That is the cleanest setup most of the time, but Angular also accepts inline templates declared directly in the TypeScript file. Both options are valid — you just have to pick one per component, because every component must have exactly one template defined somewhere.

To switch from an external file to an inline template, open server.component.ts and replace the templateUrl key with template. The value becomes a plain string holding the HTML. For a single line, regular single quotes are enough, but as soon as you want multiline HTML — which is almost always the case — switch the string delimiters to backticks. ES6 template literals make it trivial to spread the markup over several lines and even to interpolate values later on.

@Component({
  selector: 'app-server',
  template: `
    <app-server></app-server>
    <app-server></app-server>
  `
})
export class ServerComponent {}

After saving, the browser shows exactly the same result as before: from the user's point of view nothing has changed, but the way you configure the component is now slightly different. Which approach should you favour? If the template is small — a handful of elements — an inline template keeps everything close together and is perfectly fine. As soon as you reach three lines of HTML or more, the external file becomes a lot easier to read, format and refactor.

There are two takeaways worth remembering. First, both template and templateUrl are accepted but only one at a time. Second, the template is the only piece a component must have. The selector can be omitted (you will see why when we cover routing) and styles are optional, but without a template Angular cannot render anything. In the next lesson we will look at the styling side, which follows the same dual configuration model.

Summary

This lesson explains how to work with component templates in Angular by comparing inline templates (defined directly in the component using the `template` property) with external template files. It demonstrates how to use JavaScript template literals (backticks) for multi-line inline templates and provides guidance on when to use each approach based on HTML complexity.

Key points

• Inline templates are defined using the `template` property in the component decorator, replacing `templateUrl` to embed HTML directly in the component file
• Multi-line inline templates require JavaScript template literals (backticks) to wrap the HTML code, enabling proper line breaks
• Inline templates are suitable for simple HTML content, but external template files are recommended when HTML exceeds 3 lines for better readability and maintainability
• A template property is mandatory in every Angular component, whether inline or external
• Component selectors are optional (useful for routing strategies covered later), and styling is optional, but templates are always required
• The choice between inline and external templates depends on code complexity: keep logic and templates together for small components, but separate them for larger ones

FAQ

What is the difference between templateUrl and template properties?

templateUrl points to an external HTML file located elsewhere, while template contains the HTML code directly in the component file as a JavaScript string, allowing you to define templates inline.

When should I use inline templates versus external template files?

Use inline templates for small HTML content (less than 3 lines) to keep all component logic in one file, and external template files for larger HTML to maintain readability and keep the component TypeScript file focused.

Can I omit the template property in an Angular component?

No, every component must have a template (either inline via the `template` property or external via `templateUrl`). However, you can optionally omit the selector and styling properties.