Angular Quick Start: Data Binding with Wijmo Controls

This blog was originally published on February 22, 2017 for Wijmo Japan.

This article introduces how to bind data with Wijmo InputNumber (numeric input) component based on the Angular application we created in the previous article.

Wijmo supports all three types of Angular data binding:

1. Property binding: Value set in the parent component (“Main page”, in this case) is passed to the child component (InputNumber, in this case). This is also known as one-way data binding.
2. Two-way data binding: Value set in the parent component is passed to the child component, and simultaneously, the value set in the child component is passed to the parent component. Hence, values of the parent and child components are always in sync.
3. Event binding: Handles the event when a specific operation is performed in the child component.

Adding InputNumber component

Import the WjInputModule module in the src/app/app.modules.ts file.

import { WjInputModule } from 'wijmo/wijmo.angular2.input';  

@NgModule({  
 :  
  imports: [  
 :  
    WjInputModule  
  ]  
})  

Add the InputNumber component in the src/app/app.component.html file.

<wj-input-number></wj-input-number>

Property binding

Bind the data with the step property of InputNumber, in the src/app/app.component.html file.

<wj-input-number [step]="step"></wj-input-number>

Set the properties to be bound and their values in src/app/app.component.ts file.

export class AppComponent {  
  step: number;  
  constructor() {  
    this.step = 100;  
  }  
}  

When you run the application, you can see that the step property is set, and the value can be changed in increments of 100 by clicking the + or - button.

Two-way data binding

Set two-way data binding on the “text” property of InputNumber in the src/app/app.component.html file. In addition, add a text box and set the two-way binding on the same as well.

 <wj-input-number ... [(text)]="text"></wj-input-number>   

<br><input [(ngModel)]="text"> 

Set the properties to be bound and their values in the src/app/app.component.ts file.

export class AppComponent {  
  text: string;  
  constructor() {  
    this.text = '0';  
  }  
}  

Now, run the application and change the value in InputNumber or text box to observe that the other value also gets changed at the same time.

Event binding

Define the handling of valueChanged event of InputNumber and determine the value whenever it changes.

In the src/app/app.component.ts file, define the onValueChanged method that handles the event and the negative property that determines whether a value is negative or not. Also, import the wijmo/wijmo.input module for referencing the InputNumber class and its members.

import * as wjcInput from 'wijmo/wijmo.input';  

export class AppComponent {  
  negative: boolean;  
  constructor() {  
    this.negative = false;  
  }  
  onValueChanged(s: wjcInput.InputNumber) {  
    this.negative = s.value < 0;  
  }  
}  

When you import the wijmo/wijmo.input module, type definition file of the module is also imported, which enables IntelliSense while using the classes and members of that module.

In the src/app/app.component.html file, set the event binding of valueChanged. Once you set the event, pass the component variable inputNumber to argument of the event handler method. In addition, add a string showing that the value entered is negative.

 <wj-input-number ... #inputNumber (valueChanged)="onValueChanged(inputNumber)"></wj-input-number>   

<p *ngIf="negative">Value is negative.</p> 

Although it's omitted here, you can even pass the event variable $event to argument of the event handler method.

Run the application and enter a negative number to get the message “Value is negative.”