Angular 2 dropdownlist selectedItem and events

[jfabianParticipant]

I know I can use 2 way databinding which I see in the example but how to I get the selected item or handle events (onChange) with the dropdownlist in angular 2?

<jqxDropDownList (onChange)='ddlChange($event)' #ddlReference  [width]='200' [height]='25' [source]='source' [selectedIndex]='1'></jqxDropDownList> 

 @ViewChild("ddlReference") myDropDownList : jqxDropDownListComponent;
    
//THROWS Error
let item =  this.myDropDownList.getSelectedItem();
let val = item.value;     

 ddlChange(event: any):void{
        //doesnt fire ?
        alert("on change fired");
    }

[Ivo ZhulevParticipant]

Hi jfabian,

The code you provided is correct, i just ain’t sure where you put it.
So here is a full example:

import { Component, AfterViewInit, ViewChild } from '@angular/core';

import { jqxDropDownListComponent } from 'jqwidgets-ts/angular_jqxdropdownlist';

@Component({
    selector: 'my-app',
    template: <code></code><jqxDropDownList #reference (onChange)='onChangeEvent($event)'
                   [width]='200' [height]='25' [source]='source' [selectedIndex]='1'>
               </jqxDropDownList><code></code>
}) 

export class AppComponent implements AfterViewInit
{
    @ViewChild('reference') myDropDownList: jqxDropDownListComponent;

    onChangeEvent(e: any): void
    {
        let item = this.myDropDownList.getSelectedItem();
        console.log(item.value)
    }

    source: string[] =
    [
        "Affogato",
        "Americano",
        "Bicerin"
    ];  
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[jfabianParticipant]

Yeah, that doesn’t fire at all and no errors just not emitting the event. I see in the jqxWidgets typescript file the events are outputs so not sure why this doesn’t work? Here is my exact code but when I change the dropdownlist nothing.

I’m using Angular 2.4.4. I don’t have any issues with the button event just seems like the dropdownlist and the listbox doesn’t fire events.

<jqxDropDownList #reference (onChange)=’onChangeEvent($event)’ [width]=’200′ [height]=’25’ [source]=’source’ [selectedIndex]=’1′></jqxDropDownList>

import {Component, ViewChild} from ‘@angular/core’;
import {jqxDropDownListComponent } from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxdropdownlist’;

@Component({
templateUrl: ‘playground.component.html’,
selector: ‘playground-component’
})

export class PlaygroundComponent{

@ViewChild(“reference”) myDropDownList : jqxDropDownListComponent;

source : Array<string> =
[“Affogato”,
“Americano”,
“Bicerin”
];

onChangeEvent(e: any): void
{
let item = this.myDropDownList.getSelectedItem();
console.log(item.value);
}

}

[jfabianParticipant]

I added a button and tried to get the selected value in a button and the error i get is, this.host.jqxDropDownList is not a function. I’m using webpack so I’m guessing this may be an issue related to webpack ?

[Ivo ZhulevParticipant]

Hi jfabian,

Did you include jqxdropdownlist.js in your HTML file?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts