10. Template Syntax: Interpolation {{ }}

Angular templates use template syntax to display data, respond to user input, and modify the HTML view dynamically. Interpolation is the simplest form of data binding.

What is Interpolation?

Interpolation uses double curly braces ({{ }}) to embed a component's property value into the HTML template.

Angular evaluates the expression inside the braces, converts the result to a string, and displays it in the browser.

Interpolation Example

Component Class (data-display.component.ts):

typescript export class DataDisplayComponent { appName: string = 'Project Phoenix'; version: number = 1.0; launchDate: Date = new Date(2023, 11, 15); price: number = 49.99;

get statusMessage(): string { return Current status: Active (v${this.version}); } }

Template (data-display.component.html):

html

Welcome to {{ appName }}

Version: {{ version }}

{{ statusMessage }}

Total items: {{ 5 + 3 }}

App Name Uppercase: {{ appName.toUpperCase() }}

Launch Date: {{ launchDate }}

Rules of Interpolation

• The expression must return a string or a value that can be easily converted to a string.
• You can access properties, calls methods (getters are preferred), and use basic arithmetic/logic.
• You cannot use assignments (=, +=, etc.), new operators, or chaining operators like ++.