Templates and Interpolation
In Angular, the template is the HTML view of your component. What makes Angular special is that you can embed dynamic data directly in your HTML using interpolation.
Interpolation uses double curly braces
{{ }} to display component properties in the template. It's like a placeholder that Angular replaces with actual values.Here's an example:
import { Component } from '@angular/core';
@Component({
selector: 'app-user',
template: `
<div>
<h1>Welcome, {{ username }}!</h1>
<p>Your age is {{ age }}</p>
<p>Today is {{ currentDate }}</p>
</div>
`
})
export class UserComponent {
username = 'JohnDoe';
age = 25;
currentDate = new Date();
}
You can also use expressions inside interpolation:
<p>{{ 5 + 5 }}</p> <!-- displays 10 -->
<p>{{ username.toUpperCase() }}</p> <!-- displays JOHN DOE -->
<p>{{ age >= 18 ? 'Adult' : 'Minor' }}</p>
Two Minute Drill
- Templates are HTML files with Angular syntax.
- Interpolation
{{ }}displays component properties in the template. - You can use expressions, method calls, and ternary operators inside interpolation.
- Interpolation automatically updates when properties change.
- It's the simplest form of data binding.
Need more clarification?
Drop us an email at career@quipoinfotech.com