Inline vs external templates in Angular

Introduction

Templates define what your Angular component shows on the screen. You can write them inside the component file (inline) or in a separate file (external). This choice helps keep your code organized and easy to manage.

When your component has a very simple and short template, inline templates keep everything in one place.

When your template is large or complex, external templates help keep your component file clean.

When multiple developers work on the same project, external templates make collaboration easier.

When you want to reuse or edit templates separately from the component logic.

When you want to improve readability by separating HTML from TypeScript code.

Syntax

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<h1>Hello Inline</h1>`, // Inline template
  // OR
  // templateUrl: './example.component.html' // External template
})
export class ExampleComponent {}

Use template for inline templates with backticks for multi-line HTML.

Use templateUrl to link to an external HTML file.

Examples

This example shows a simple inline template inside the component file.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-inline',
  template: `<p>This is an inline template.</p>`
})
export class InlineComponent {}

This example uses an external HTML file for the template.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-external',
  templateUrl: './external.component.html'
})
export class ExternalComponent {}

This is the content of the external template file linked above.

Angular

<!-- external.component.html -->
<h2>External Template Content</h2>
<p>This HTML is in a separate file.</p>

Sample Program

This code defines two components: one with an inline template and one with an external template. The inline component shows a heading directly from the code. The external component loads its HTML from a separate file.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting-inline',
  template: `<h1>Welcome to Inline Template!</h1>`
})
export class GreetingInlineComponent {}

@Component({
  selector: 'app-greeting-external',
  templateUrl: './greeting-external.component.html'
})
export class GreetingExternalComponent {}

Important Notes

Inline templates are great for quick, small templates but can get messy if too large.

External templates improve readability and are easier to maintain for bigger projects.

Angular tooling supports live reload for both inline and external templates during development.

Summary

Inline templates keep HTML inside the component file using the template property.

External templates keep HTML in separate files linked with templateUrl.

Choose based on template size, project complexity, and team preferences.