Angular 2 Input Binding Tutorial - lishman.io
lishman.io Loading..
Style: Blog or IDE

Angular 2 Input Binding Tutorial

Bind to the following <input> fields with Angular 2 and TypeScript: text, textarea, checkbox, radio and select (drop-down list).

Quick Tip

In the text below, when you see a word or phrase with this color, click on it to highlight the source code.

Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

Text

We use two-way data binding with ngModel to bind to the textValue property on the component class.

Two-way binding allows us to use the property to set the initial value of an <input>, and then have the user's changes flow back to the property. We can also change the property value in the code and have these changes reflected in the <input>. For more information about two-way data binding with an input field, see the Angular 2 Two Way Data Binding tutorial.

A template reference variable on the input gives us access to the properties and methods of the input control.

text.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Text Area

textarea behaves in a similar way to the textbox. Again, we use two-way data binding with ngModel to bind to the textValue property on the component class to keep user and programmatic changes in sync.

This time we use the canonical form to specify the template reference variable but we could just as easily used #textarea instead.

text-area.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Checkbox

The change event is triggered when the user clicks on a checkbox. We use this event to pass a template reference variable into a function to log user action. We can determine whether or not the checkbox has been selected using the checked property of the argument.

We also use the checked property to highlight the selected checkbox labels using class bindings. This uses the styles property to set the text color to OrangeRed for all the selected checkboxes.

checkbox.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Radio

The radio field behaves in a similar way to the checkbox. We use the change event on the <input> element to execute a template statement which passes a template reference variable into a component method.

The value property property of the HTMLInputElement argument is used to log user's selection. This value property corresponds to the value attribute of the HTML <input> element.

radio.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Drop-down List

We use an array to populate the drop-down with a list of values. The built-in ngFor directive comes in handy here to loop through the array and set up the option values. For more information on ngFor or any other of the built-in directives see the Angular 2 Built-in Directives tutorial.

[(ngModel)] sets up two-way data binding on the select element. This will ensure that the drop-down list will display the current item when it is opened. When a new value is chosen from the list, two-way binding also ensures that the current property on the component is automatically updated.

An additional binding to the change event of the select element logs the user action by calling a method in the template statement.

drop-down.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Where Next?

More Tutorials

To find out more about Angular components, check out these tutorials.

  • Templates - introduction to inline and external templates.
  • Interpolation - use curly braces and template expressions to output data.
  • Property Binding - update standard properties on the DOM using template expressions.
  • Event Binding - detect standard DOM events and execute template statements.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Built-in Directives - use ngIf, ngSwitch, ngFor, ngClass and ngStyle to transform the DOM.
  • Component Input Output - use @Input and @Output to pass data in to and out of a component.

Source Code

The source code for this tutorial is available on plunker and in the angular-2-input-binding GitHub repo.