Angular Basics
Angular Templates and Interpolation
An Angular template is HTML extended with binding syntax. Interpolation — double curly braces — evaluates a component expression and inserts the result as text, re-evaluating automatically whenever the value changes.
What is Templates and Interpolation in Angular?
An Angular template is HTML extended with binding syntax. Interpolation — double curly braces — evaluates a component expression and inserts the result as text, re-evaluating automatically whenever the value changes.
Templates and Interpolation example
<h2>{{ job.title }}</h2>
<p>Stipend: ₹{{ job.stipend }}</p>
<p>Applications: {{ applicants.length }}</p>
<p>{{ isRemote ? 'Work from home' : job.city }}</p>
<p>{{ job.title.toUpperCase() }}</p>How this works
Anything inside the braces is a template expression: property access, method calls, ternaries and arithmetic. The result is always inserted as text, so HTML in the value is escaped rather than rendered — which prevents cross-site scripting by default.
Key points to remember
- Expressions must be side-effect free; assignments and new are not allowed.
- Interpolation always produces text — use property binding for attributes and [innerHTML] for markup.
- A method called in the template runs on every change detection cycle, so keep it cheap.
Common mistakes with Templates and Interpolation
- Calling an expensive method inside interpolation, which then runs constantly.
- Reading a property of an object that is still null while data loads — use the safe navigation operator, job?.title.
Angular Templates and Interpolation— Interview Questions & FAQs
Why is my HTML shown as plain text in Angular?+
Interpolation escapes HTML deliberately to prevent XSS. To render trusted markup, bind with [innerHTML], and sanitise anything that came from a user.