Templates and Interpolation

Angular templates are just HTML with extra powers. ## Interpolation: show a variable in HTML In your component: ```ts export class ProfileComponent { firstName = 'Jason'; points = 120; } ``` In your template: ```html <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) ```ts export class CartComponent { items = 3; price = 20; } ``` ```html <p>Items: {{ items }}</p> <p>Total: ${{ items * price }}</p> ``` > Next: Event binding and handling clicks like a real app.