Property Binding

We have a function that will run whenever a button is clicked. All it does is log a message. We’ll want to make it more useful by reversing some input text. First, we’ll need to store the value from the input.

Here’s how we’ll approach things:

1. We’ll create a property to store the input’s value.
2. We’ll listen to the input event on the <input> element.
3. If the input event is triggered, we’ll update the property.
4. The button will need to be disabled if the input is empty.

The last step will require us to do some property binding.

Storing the input

In the app.component.ts component class file, we’ll define a property called text. It will be set to an empty string.

export class AppComponent {
  text = '';
}

The goal is to update the text property whenever the user starts to type into the input. In the template, we can listen to the input event on the <input> element, which is triggered every time the input changes. ...