Chapter 2.2☕ 14 min read

Templates — Inline vs External

Templates are the face of your component — they define what users see.

01What is a Template

A template is the HTML view of your Angular component. It combines regular HTML with Angular syntax to create dynamic, interactive UIs.

"Template = component ka face — ye dikhata hai user ko." Just like your face shows your expression, the template shows the component's data and behavior.

Templates can be written in two ways: inline (inside the TypeScript file) or external (in a separate .html file). Let's explore both.

02External Template (Recommended)

External templates use the templateUrl property to link to a separate .html file:

@Component({\n  selector: 'app-hello',\n  templateUrl: './hello.component.html',  // 📁 Points to external file\n  standalone: true\n})

Benefits of external templates:

✅ Syntax highlighting — Your editor properly highlights HTML
✅ Readability — Short TypeScript files, focused HTML files
✅ Team friendly — Designers can edit HTML without touching TypeScript
✅ Maintainable — Easy to find and update templates

External is the recommended approach for all real projects. "External = alag file mein recipe likhna — clean aur clear."

03Inline Template

Inline templates use the template property to write HTML directly in the TypeScript file:

@Component({\n  selector: 'app-hello',\n  template: `{{ name }}
\n{{ description }}
`,  // 📝 Inline\n  standalone: true\n})

Use backticks (`) for multi-line inline templates. Regular quotes are only for single-line.

When to use inline:

✅ Components with 1-2 lines of HTML
✅ Demo/learning examples
✅ Tiny reusable components like badges, icons

"Inline = chitthi pe likhna — theek hai for small message." But for anything bigger, use external.

04Template Syntax You'll Use Daily

Here's the Angular template syntax you'll use every single day as an Angular developer:

{{ interpolation }} — Double curly braces display data: <h1>{{ title }}</h1>
[property]="value" — Square brackets set element properties: <img [src]="imageUrl">
(event)="handler()" — Parentheses listen to events: <button (click)="save()">
@if / @else — Conditionally show/hide content (new syntax)
@for / @empty — Loop through arrays (new syntax)
| pipe — Transform data in templates: {{ price | currency }}

"Ye sab next chapters mein detail mein — abhi bas pehchaan karo." We'll cover each one in depth in upcoming chapters.

05Best Practices

Follow these best practices to keep your templates clean and maintainable:

Always use external templates for anything over 3 lines of HTML
Keep templates focused — one job per component. If a template gets too long, consider breaking it into child components
Don't put business logic in template — templates are for displaying data, not computing it. Use TypeScript methods instead
Use pipes for formatting — date, currency, and other formatting should be done with pipes, not methods
Limit template expressions — complex expressions in templates hurt performance

"Template sirf dikhana hai — sochna TypeScript ka kaam hai." Templates show, components think.

Key Takeaways

✅ Templates define what the user sees — they're the face of your component.
✅ External templates (templateUrl) are recommended for all real projects.
✅ Inline templates (template) are okay only for 1-2 line components.
✅ Daily template syntax: {{ }} for data, [property] for binding, (event) for handlers, @if/@for for control flow.
✅ Keep business logic in TypeScript — templates are for displaying, not computing.

Previous2.1 — @Component Decorator 📋 All Chapters Next Chapter2.3 — Styles Component vs Global →