Bind to the following <input>
fields with Angular 2 and TypeScript: text
, textarea
, checkbox
, radio
and select
(drop-down list).
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 Two Way Data Binding tutorial.
A template reference variable on the input gives us access to the properties and methods of the input control.
import { Component } from '@angular/core';
@Component({
selector: 'app-text-box',
template: `
<h1>Text ({{textValue}})</h1>
<input #textbox type="text" [(ngModel)]="textValue" required>
<button (click)="logText(textbox.value)">Update Log</button>
<button (click)="textValue=''">Clear</button>
<h2>Template Reference Variable</h2>
Type: '{{textbox.type}}', required: '{{textbox.hasAttribute('required')}}',
upper: '{{textbox.value.toUpperCase()}}'
<h2>Log <button (click)="log=''">Clear</button></h2>
<pre>{{log}}</pre>`
})
export class TextComponent {
textValue = 'initial value';
log = '';
logText(value: string): void {
this.log += `Text changed to '${value}'\n`;
}
}
Here is the output from this component.
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.
import { Component } from '@angular/core';
@Component({
selector: 'app-text-area',
template: `
<h1>Text Area</h1>
<textarea ref-textarea [(ngModel)]="textValue" rows="4"></textarea><br/>
<button (click)="logText(textarea.value)">Update Log</button>
<button (click)="textValue=''">Clear</button>
<h2>Log <button (click)="log=''">Clear</button></h2>
<pre>{{log}}</pre>`
})
export class TextAreaComponent {
textValue = 'initial value';
log = '';
logText(value: string): void {
this.log += `Text changed to '${value}'\n`;
}
}
Here is the output from this component.
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.
import { Component } from '@angular/core';
@Component({
selector: 'app-checkbox',
template: `
<h1>Checkbox</h1>
<p>
<label [class.selected]="cb1.checked">
<input #cb1 type="checkbox" value="one" (change)="logCheckbox(cb1)"> One
</label>
<label [class.selected]="cb2.checked">
<input #cb2 type="checkbox" value="two" (change)="logCheckbox(cb2)"> Two
</label>
<label [class.selected]="cb3.checked">
<input #cb3 type="checkbox" value="three" (change)="logCheckbox(cb3)"> Three
</label>
</p>
<h2>Log <button (click)="log=''">Clear</button></h2>
<pre>{{log}}</pre>`,
styles: ['.selected {color: OrangeRed;}']
})
export class CheckboxComponent {
log = '';
logCheckbox(element: HTMLInputElement): void {
this.log += `Checkbox ${element.value} was ${element.checked ? '' : 'un'}checked\n`;
}
}
Here is the output from this component.
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.
import { Component } from '@angular/core';
@Component({
selector: 'app-radio',
template: `
<h1>Radio</h1>
<p>
<label [class.selected]="r1.checked">
<input #r1 type="radio" name="r" value="one" (change)="logRadio(r1)"> One
</label>
<label [class.selected]="r2.checked">
<input #r2 type="radio" name="r" value="two" (change)="logRadio(r2)"> Two
</label>
<label [class.selected]="r3.checked">
<input #r3 type="radio" name="r" value="three" (change)="logRadio(r3)"> Three
</label>
</p>
<h2>Log <button (click)="log=''">Clear</button></h2>
<pre>{{log}}</pre>`,
styles: ['.selected {color: OrangeRed;}']
})
export class RadioComponent {
log = '';
logRadio(element: HTMLInputElement): void {
this.log += `Radio ${element.value} was selected\n`;
}
}
Here is the output from this component.
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 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.
import { Component } from '@angular/core';
@Component({
selector: 'app-drop-down',
template: `
<h1>Drop-down List</h1>
<select #select [(ngModel)]="current" (change)="logDropdown(select.value)">
<option *ngFor="let item of list" [value]="item.id">{{item.name}}</option>
</select>
<h2>Log <button (click)="log=''">Clear</button></h2>
<pre>{{log}}</pre>`
})
export class DropDownComponent {
list: any = [
{id: 1, name: 'one'},
{id: 2, name: 'two'},
{id: 3, name: 'three'}
];
current = 2;
log = '';
logDropdown(id: number): void {
const NAME = this.list.find((item: any) => item.id === +id).name;
this.log += `Value ${NAME} was selected\n`;
}
}
Here is the output from this component.
To find out more about Angular and TypeScript, check out these tutorials.
<hello-world>
custom element using an Angular and TypeScript.ngModel
.ngIf
, ngSwitch
, ngFor
, ngClass
and ngStyle
.@Input
and @Output
to pass data in to and out of a component.