Property Binding and Responding to Events

The Angular framework provides two helpful decorators that we can use in our directives to enhance their functionality:

• @HostBinding: This binds a value to the property of the native host element.

• @HostListener: This binds to an event of the native host element.

The native host element is the element where our directive takes action. The preceding decorators are similar to the property and event binding we learned previously.

The native input HTML element can support different types, including simple text, radio buttons, and numeric values. When we use the latter, the input adds two arrows in-line, up and down, to control its value. It is this feature of the input element that makes it look incomplete. If we type a nonnumerical character, the input still renders it.

Creating a numeric attribute directive

We will create an attribute directive that rejects nonnumerical values to solve this problem:

1. Run the following Angular CLI command to create a new directive named numeric:

Note: The command below is for creating a directive on the local machine using the Angular CLI.