Day #18 - Inline Templates: Are They a Good Choice?

Inline Templates: Bad Practice or a Path to Simpler Components?

During one of his daily X (formerly Twitter) scrolls, Dominik Donoch stumbled upon a thought-provoking post from Younes. The idea? Imagine using any imported or defined TypeScript structure directly in your inline templates without needing to assign it to class properties.

"If Angular allowed such flexibility, would you switch from templateUrl to inline templates?"

This question sparked curiosity and led Dominik to explore a perspective that not all Angular developers share—the benefits of inline templates.

What Are Inline Templates?

Angular provides two ways to define a component's template:

1. External Template Files (default)

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

The templateUrl property links to an external .html file where the component's view lives.

2. Inline Templates (within the TypeScript file)

@Component({
  selector: 'app-hello',
  template: `<div>Hello, Inline Template!</div>`,
})
export class HelloComponent {}

With inline templates, the template property embeds the HTML directly as a string within the component's TypeScript file. While this method is often overlooked, it brings the logic and view closer together, offering several productivity benefits.

Template File vs. Inline Template

Angular offers two approaches for defining templates:

  1. Separate HTML files using templateUrl.
  2. Inline templates written as strings in the component’s TypeScript file.

Inline templates are often labeled as "bad practice" on platforms like Reddit or StackOverflow. But Dominik challenges this notion, showing how they can actually:

  • Simplify components.
  • Provide better context by keeping logic and view together.
  • Promote cleaner and modular code when used effectively.

Real-World Example

In the angular.love repo, Dominik analyzed a header component with 80 lines of template code. Instead of leaving it bloated, he refactored the template by:

  • Breaking it into smaller components like al-header-logo, al-header-language, and al-header-mobile-menu.
  • Moving the template inline for better readability.

The result? A descriptive and concise parent component with just 24 lines of inline template. Check out the detailed PR here.

The Sweet Spot

Inline templates may not always be ideal for complex forms or larger components. But for smaller, focused components, they:

  • Simplify code reviews.
  • Offer immediate clarity.
  • Boost development speed.

Ultimately, the choice between inline templates and external files depends on your project’s needs and your team’s workflow. Dominik encourages you to give inline templates a try and find the balance that works best.

📄 Curious about this debate? Dive into Dominik’s full blog post to learn how inline templates can improve your development experience, and discover some cool productivity tips using custom IDE snippets!

Article Thumbnail