VisaSpark
Sign in
intermediate18 min

Templates and Data Binding

Interpolation, property binding, and event binding between a template and its class.

What you'll learn

  • Use interpolation ({{ }}) to display a class property's value in a template
  • Use property binding ([property]) to set a DOM property from a class value
  • Use event binding ((event)) to call a class method when a DOM event fires

Explanation

Angular templates connect to their component class through three main kinds of binding. Interpolation ({{ expression }}) displays a value as text: <p>Hello, {{ name }}!</p>. Property binding ([property]="expression") sets a DOM element property (not just its text) from a class value: <img [src]="imageUrl"> sets the image's actual src property, re-evaluated whenever imageUrl changes. Event binding ((event)="handler()") calls a class method when a DOM event fires: <button (click)="increment()">+1</button> calls the class's increment() method on every click.

These three directions matter: interpolation and property binding both flow data from the class to the template (one-way), while event binding flows from the template to the class (also one-way, in the opposite direction) -- combining a property binding and an event binding on the same value (Angular's [(ngModel)]="value" "banana in a box" syntax) is how you get two-way binding for form inputs, layered on top of these one-way primitives rather than being a separate mechanism.

Since a live template can't render on this platform, this course's labs model what a click handler or computed binding would produce by simulating the state change directly in TypeScript.

Guided lab

Predict: A click-handler's effect on component state

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models a component's counter state and its (click) handler method as plain TypeScript, since a live template can't render here. Predict the value of count after both calls to increment().

export class CounterComponent {
  count = 0;

  increment(): void {
    this.count = this.count + 1;
  }
}

const component = new CounterComponent();
component.increment();
component.increment();
console.log(component.count);

Stuck? Get a hint.

Common mistakes

  • Using interpolation ({{ }}) when a DOM property genuinely needs setting (like disabled or src), instead of property binding ([property]).
  • Forgetting event binding syntax uses parentheses (click) while property binding uses square brackets [src] -- mixing them up is a common early mistake.
  • Assuming [(ngModel)] is a separate binding mechanism rather than property binding and event binding combined ('banana in a box').

Knowledge check

Knowledge check

1. Which binding syntax sets a DOM element's actual property (not just displayed text)?
2. Which binding syntax calls a class method in response to a DOM event?
3. What does [(ngModel)] combine?

Takeaway

Use {{ }} to display text, [property] to set a real DOM property, and (event) to react to user actions -- two-way binding combines the latter two.

Summary

Interpolation displays text, property binding sets DOM properties, and event binding calls methods on events -- all one-way, with two-way binding layered on top via [(ngModel)].

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Structural Directives: @if and @for →