Event Binding

Angular event binding

Angular event binding allows our pages to detect and respond to user interactions, such as typing text into an input field, submitting a form, or selecting options from lists.

Without event binding, our apps would be limited in usability and provide a pretty poor experience for our users.

Event binding syntax

The syntax for event binding consists of a target event (such as a mouse click or keypress) within parentheses to the left of the equals sign, followed by a template statement (used to respond to the event) in quotes on the right.

Using event binding in the template-app app

Event binding has been used in the template-app/src/app/home/home.page.html template to set the navigation link for each list item (highlighted):