How to access WIJMO controls in Angular CLI?

Accessing WIJMO controls in the HTML template file in an Angular CLI project is not as easy as I thought it would be.   After more than an hour I finally cracked the problem. This problem should be very easy in plain old Javascript but tricky on an Angular CLI project.

Here are the steps in accessing a WIJMO Combobox controls selectedItem on a SelectionChange event.

First, we provide a hashtag (#cmbProjects) to the control in your HTML template file as shown in the code below.  This will serve has reference Id of the said control.

<wj-combo-box #cmbProjects
[itemsSource]="projectsData"
[displayMemberPath]="'project'"
[selectedValuePath]="'id'"
(selectedIndexChanged)="projectsDataOnChange()">
</wj-combo-box>

Second,  we define a property in your Typescript (TS) file.  To do this, we need to use ViewChild property decorator and ElementRef object.  The decorator parameter must be equal to the hashtag specified in the first step.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ObservableArray, CollectionView} from 'wijmo/wijmo';
import { WjComboBox } from 'wijmo/wijmo.angular2.input';

export class MyComponent {
    @ViewChild("cmbProjects")
    private cmbProjects:ElementRef;
}

Lastly, we insert the event method into our class MyComponent.  This method was define your HTML template file associated with the control selectedIndexChanged method.  In this code we use the selectedIndex property of the control it’s data, e.g., projectsData.

public projectsDataOnChange() : void
{
   console.log(this.projectsData[this.cmbProjects["selectedIndex"]]["project"]);
}

So now every time you change the value of the control we can get the underlying index of the Observable Array.

Thats it! Happy coding. And if you find this blog helpful, you can make the donation by clicking the Paypal button below.


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s