Example: Handle User Input with Complex Expressions

This component has an input field that asks for a name to greet. When the value of the input field changes, the component changes the value of the bound name property and uses complex expressions to format the output.

The <input> element uses the oninput event to listen for a change to its value. To bind the handleInput function to the template, we use the same syntax that we use to bind a property, {...}. The handleInput JavaScript function executes when the value of the <input> element changes.

When the value of the name property changes, the component re-renders and the following expression is evaluated.

Notice in the JavaScript class that handleInput is passed an event object. The event object contains information about the input event. The component uses the event object to get the value that the user enters into the input field.