BasicWeb Developmentintermediate

Templates & Interpolation

Relax. We'll talk through this in plain words — no textbook voice.

A component's UI is written in HTML. Interpolation {{...}} lets you display data from the TypeScript class inside the template.

typescript

<div>
  <h2>User Profile</h2>
  <p>Username: {{ username }}</p>
  <p>Account Age: {{ getAccountAge() }} years</p>
</div>

// user-profile.component.ts
export class UserProfileComponent {
  username = 'Jane Doe';
  getAccountAge() {
    return 2;
  }
}

You should see

(The browser will show 'Username: Jane Doe' and 'Account Age: 2 years')