Check out myAngular article series with live demos and Facebook group Angular - Advanced Topics

Input controls in Angular

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Sat Oct 10 2015

Capturing user input is an important part of web development, so in the following post I will demonstrate how to use common input controls like textbox, checkbox and radio button in Angular.

Textbox

2-way binding in Angular 1.x made capturing text input very convenient through two way bound ng-models. As you may have heard, Angular has dropped 2-way bindings, so to create the same effect we have to rely on a combination of event and property bindings. This may seem inconvenient, but luckily, the Angular team has given us syntactic sugar that hides the added complexity. In the following example I will show a “two-way bound” textbox using the new syntax.

<div class="input-controls"> <h4>"Two way bindings"</h4> <input [(ngModel)]="name" /> <div>Current Value: {{name}}</div> </div>

The key to the two way binding effect is the [(ng-model)] syntax where a property binding and an event binding is combined into a single binding expression.

Radio button

Radio buttons can be wired up using a simple click binding like so:

<div class="input-controls"> <h4>Select a gender</h4> <div> <label> <input #male name="gender" type="radio" value="Male" (click)="gender = male.value" /> Male </label> </div> <div> <label> <input #female name="gender" type="radio" value="Female" (click)="gender = female.value" /> Female </label> </div> <div> Selected gender is <strong>{{gender}}</strong> </div> </div>

Notice how I am using the #male and #female aliases to represent the underlying DOM elements.

Checkbox

The next example will show how to create a checkbox list where the user may make multiple selections to showcase their programming skills. The selected choices are bound to a list.

<div class="input-controls"> <h4>Select your programming skills</h4> <div> <label> <input #angularcb type="checkbox" (change)="angular = angularcb.checked" /> Angular </label> </div> <div> <label> <input #javascriptcb type="checkbox" (change)="javascript = javascriptcb.checked" /> JavaScript </label> </div> <div> <label> <input #csharpcb type="checkbox" (change)="csharp = csharpcb.checked" /> C# </label> </div> </div> <div> Selected Skills: <ul> <li *ngIf="angular">Angular</li> <li *ngIf="javascript">JavaScript</li> <li *ngIf="csharp">C#</li> </ul> </div>

Again I am using aliases for the underlying DOM elements, but notice how I am toggling the backing data property using the (change) binding.

The rest of the component is defined in the following TypeScript snippet

import {Component} from '@angular/core'; @Component({ selector: 'input-controls', templateUrl: './components/input-controls/input-controls.html' }) export class InputControls { gender:string; javascript = false; angular = false; csharp = false; name = 'Two way bound'; }

As always my samples are available as a live demo as well as on Github.

Below is a screenshot of what the UI looks like.

If you liked this article, share it with your friends on social media:

We also have a new Facebook group about advanced Angular topics.

I invite you to follow me on twitter