Angular Basics›Core· 40 min read

Property & Event Binding

Square brackets push data into an element; round brackets listen for actions like clicks.

What you will learn

Use property binding with [square brackets]
Use event binding with (round brackets)
Tell the two directions of data flow apart

Two arrows of data

Interpolation prints text. But often you want to set a real property of an element, or react when the user does something. Angular has neat syntax for both:

Property binding [property]="value" — push data from the class into the element.
Event binding (event)="method()" — run a method when an event happens.

Property binding: class → element

Put the property name in square brackets. Angular keeps it in sync with your class value.

Data to bind into the template

// component class
imageUrl = 'cat.jpg';
isSaving = true;

Note: Output: (No visible output by itself.) The class holds a picture path in imageUrl and a true/false flag in isSaving. The template below pushes these straight onto a real <img> and <button>.

Property binding sets src and disabled

<img [src]="imageUrl" alt="A cat">
<button [disabled]="isSaving">Save</button>

Note: Output: The image loads cat.jpg, and the Save button is greyed out (disabled) because isSaving is true. Change isSaving to false and the button becomes clickable.

Event binding: element → class

Put the event name in round brackets and call a method. Here a click increases a counter.

A method that runs on click

// component class
count = 0;
add() {
  this.count = this.count + 1;
}

Note: Output: (No visible output by itself.) count starts at 0, and add() raises it by one each time it is called. The template next wires a button to call add() and shows the running total.

Event binding calls add() on every click

<button (click)="add()">Add one</button>
<p>Clicks: {{ count }}</p>

Note: Output: Clicks: 0 (then 1, 2, 3… each time you click) Every click runs add(), which raises count. Interpolation then shows the new number — the screen updates instantly.

Syntax	Direction	Use it for
`{{ value }}`	Class → screen (text)	Showing a value as text
`[prop]="value"`	Class → element	Setting src, disabled, value…
`(event)="fn()"`	Element → class	Reacting to click, input, submit…

Tip: A memory aid: square brackets look like a box you put data into (property binding), and round brackets look like an ear that listens (event binding).

Q. Which binding runs a method when a button is clicked?

Answer: Event binding uses round brackets: (click)="save()" runs the save() method on each click.

✍️ Practice

Bind an image [src] to a property and change the property to swap the picture.
Add a (click) button that toggles a boolean liked between true and false.

🏠 Homework

Build a counter with two buttons: one that adds and one that subtracts, showing the total with interpolation.