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. We’ll apply this change in the app.component.html file.

<div>
  <label>Text</label>
  <input (input)="onInputText($event.target.value)" />
</div>

We’re using the same syntax we used before: a pair of parentheses with the name of the event inside. Angular supports all browser events on any element in the DOM.

In this example, we’re running a function, called onInputText(), when the input event is emitted. It’s being passed in the $event.target.value property.

Angular will define $event object for you. It’s accessible in the template. This object represents the JavaScript event object. We have access to the same properties and methods that we would find in the vanilla event object. The target property contains information about the element on which the event was triggered. If the target element is an <input> element, we can access the value through the value property.

We’ll update the component class to include the method.

export class AppComponent {
  text = '';

  onInputText (value: string) {
    this.text = value;
  }
}

The onInputText() function has one parameter: value. We’re assigning a type to the parameter. We want to make sure we’re receiving a string.

Note: JavaScript will always treat the input’s value as a string.

Inside the function, we’re updating the text property with the value parameter.

Disabling the button

The final step is to disable the button. Buttons can be disabled using the disabled attribute. However, we’ll want to toggle this attribute dynamically. We can do so by binding it to a property. In the app.component.html file, we’ll update the button to the following:

<div>
  <button (click)="onClickReverse()" [disabled]="!text.length">Submit</button>
</div>

What we’re performing is called property binding syntax. We can bind an attribute by wrapping the attribute with square brackets. This will tell Angular to interpret the value of the attribute as an expression.

Note: Expressions are lines of code that get evaluated into a single value.

In this example, we’re checking if the text property in the component class has a length. If it doesn’t, this will evaluate to true. This will cause Angular to add the disabled attribute to the element.

Once again, just like methods, we don’t have to access properties via the this keyword or by the class name AppComponent. The template will have access to the properties and methods in the component class.

Alternate solution

Instead of binding an attribute to a property, we can bind it to a function that will return a value. For example, the disabled attribute can be updated to the following:

<div>
  <button (click)="onClickReverse()" [disabled]="disableButton()">Submit</button>
</div>

Then, in the component class, we can add the disableButton() function.

export class AppComponent {
  text = '';
  
  disableButton () {
    return !text.length;
  }

  onInputText (value: string) {
    this.text = value;
  }
}

This is one approach. For our purposes, we’ll be going with the first approach because it’s simpler.

Here’s the final result: