Templates and Interpolation

Angular templates are just HTML with extra powers.

Interpolation: show a variable in HTML

In your component:

export class ProfileComponent {
  firstName = 'Jason';
  points = 120;
}

In your template:

<h1>Hello {{ firstName }}!</h1>
<p>You have {{ points }} points.</p>

Angular replaces {{ ... }} with actual values.

Interpolation rules (keep it clean)

✅ Good:

• variables ({{ points }})
• simple expressions ({{ points + 10 }})
• safe checks ({{ user?.name }})

❌ Avoid:

• heavy logic in templates (loops, long conditions)
• calling methods that run often and slow the UI

Mini example (clean and readable)

export class CartComponent {
  items = 3;
  price = 20;
}

<p>Items: {{ items }}</p>
<p>Total: ${{ items * price }}</p>

Next: Event binding and handling clicks like a real app.