Interpolation Explained with Examples - One Way Data Binding

What is Interpolation in Angular?

Interpolation in Angular is a feature used to show TypeScript data in the HTML template. It helps connect the component logic (TypeScript) with the view (HTML).


It is used in almost every real Angular project. If a project does not use interpolation, it means the project is very simple and does not really need Angular.


Basic Concept of Interpolation

When we create an Angular component, two main files are used most of the time:

  1. app.component.ts → contains logic, properties, functions, calculations, API data
  2. app.component.html → used to display data on the browser

Data is always written in the TypeScript file, but it is displayed using the HTML file. Interpolation is the bridge between these two files.



Interpolation Syntax

Interpolation uses double curly braces.

{{ }}

Anything written inside these curly braces is evaluated by Angular.


Example idea:

  1. A property like name is written in the TypeScript file
  2. Using {{ name }} in HTML will display its value in the browser

If we write just name inside HTML without interpolation, Angular will treat it as normal text and will not display the value.


How Interpolation Works Internally

Angular checks whatever is written inside {{ }} and tries to understand:

  1. Is it a property from the TypeScript file?
  2. Is it a function from the component?
  3. Is it a JavaScript expression (like 10 + 20)?

If Angular finds a valid property or expression, it executes it and displays the output.

If Angular does not find anything valid, it throws an error.


Example understanding:

  1. {{ name }} → displays property value
  2. {{ 10 + 20 }} → displays calculation result
  3. {{ Apple }} → error (because no such property exists)


Using Multiple Properties with Interpolation

You can display multiple values using interpolation, such as:

  1. Name
  2. Email
  3. Any other variable declared in the TypeScript file

Each value must be wrapped inside its own {{ }}.


Using Functions in Interpolation

Interpolation can also call functions defined in the TypeScript file.

Important points:

  1. Functions must return a value
  2. Class properties must be accessed using this
  3. Example use case: when calculation depends on parameters

However, using functions inside interpolation is not recommended unless needed.

Directly using properties is better for performance.


Passing Parameters in Interpolation Functions

You can pass parameters to functions inside interpolation.


Key points:

  1. Parameters must have proper TypeScript types
  2. TypeScript requires explicit type definition for parameters
  3. This is useful when values are dynamic


Example idea:

  1. Passing two numbers
  2. Returning their sum
  3. Displaying the result using interpolation


Limitations of Interpolation

Interpolation has some limitations and cannot be used everywhere.


You can do:

  1. Display properties
  2. Call functions
  3. Write small expressions
  4. Perform simple calculations


You cannot do:

  1. Create new variables
  2. Assign values
  3. Write complex logic
  4. Declare properties inside HTML

All heavy logic and assignments should always be done in the TypeScript file, not inside interpolation.


Interpolation as One-Way Data Binding

Interpolation is a form of one-way data binding.

  1. Data flows from TypeScript → HTML
  2. If data changes in TypeScript, UI updates automatically
  3. No manual DOM manipulation is required

If data flows both ways (HTML ↔ TypeScript), it is called two-way data binding, but interpolation supports only one-way binding.


Automatic UI Update

When a property changes due to:

  1. Button click
  2. API response
  3. Any logic in TypeScript

The updated value is automatically reflected in the UI.


No need for:

  1. document.getElementById
  2. Manual refresh
  3. Extra JavaScript code

Angular handles this internally.


Expressions Inside Interpolation

Interpolation supports expressions like:

  1. Mathematical calculations
  2. Simple conditional logic

But:

  1. Complex logic
  2. Heavy calculations
  3. Assignments

should not be written inside interpolation. These should be handled in the TypeScript file.


Security Advantage (XSS Protection)

Interpolation is safe from Cross-Site Scripting (XSS) attacks.

  1. It helps protect application data
  2. Prevents malicious scripts from running
  3. Adds an extra layer of security by default


Inline Template and Interpolation

If a component is very small, you don’t need a separate HTML file.

Instead of templateUrl, you can use:

  1. template property inside the component decorator

Inside an inline template:

  1. Normal HTML can be written
  2. Interpolation works exactly the same way

This is commonly asked in interviews.