Angular 2 Semantic UI Dropdown JS not working

Question

I am trying to create a generic drop down control in Angular 2, using Semantic UI. I have the following code:

import {ElementRef, Component, OnInit, EventEmitter} from "angular2/core";
import {DropdownValue} from "./dropdown-value";

declare var jQuery: any;

@Component({
selector: 'my-dropdown',
inputs: ['selectedItem', 'items', 'label'],
outputs: ['selectedItemChange'],
template: `
<div class="field">        
  <label>{{label}}</label>        
    <select class="ui selection dropdown" [ngModel]="selectedItem.value" (ngModelChange)="onChange($event)">
      <!--<option value="" selected>Please Select</option>-->
      <option *ngFor="#item of items" [value]="item.value">{{item.label}}</option>
    </select>        
</div>`
})

export class MyDropdownComponent implements OnInit {

items: DropdownValue[];
selectedItem: DropdownValue;
selectedItemChange: EventEmitter<any> = new EventEmitter();

constructor(private elementRef: ElementRef) {
}

ngOnInit(): any {
    this.items.unshift(new DropdownValue('', 'Please Select'));
    this.selectedItem = this.selectedItem || this.items[0];
    //jQuery(this.elementRef.nativeElement).find('select').dropdown();
}

onChange(newValue) {
    let selectedItem = this.items.find(item => item.value == newValue);
    this.selectedItemChange.emit(selectedItem);
}

}

This actually works just fine as it is (without Semantic UI JS styling), the issue is, as soon as I uncomment the line //jQuery(this.elementRef.nativeElement).find('select').dropdown(); the 'Please Select' is no longer visible and it does not show the initial selection.

schnoedel · Accepted Answer · 2016-09-13 08:04:06Z

4

As Günter said, you should call jQuery().dropdown() in ngAfterViewInit().

dropdown() resets the selected value. so you have to reselect the desired value after dropdown():

ngAfterViewInit(){
  jQuery(this.elementRef.nativeElement).find('select').dropdown({allowTab:false});
  jQuery(this.elementRef.nativeElement).find('select').dropdown("set selected",this.selectedItem.value);
}

See plunkr

answered Sep 13, 2016 at 8:04

schnoedel

3,9381 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-09-05 09:45:17Z

3

Use

setTimeout(() => 
  jQuery(this.elementRef.nativeElement).find('select').dropdown();
}, 1);

to give Angular some air to breath - update the view to show this.items.unshift

or use ngAfterViewInit(). This way it should work without setTimeout()

ngAfterViewInit() {
  jQuery(this.elementRef.nativeElement).find('select').dropdown();
}

edited Sep 5, 2016 at 9:45

answered Mar 3, 2016 at 8:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

11 Comments

EnlitenedZA Over a year ago

Please elaborate: update the view to show this.items.unshift?

Günter Zöchbauer Over a year ago

When you add/remove items from an array you (or otherwise change a value bound from the view *ngFor="#item of items"), the view is only updated after the next change detection cycle. Change detection can't run between synchronous executed lines of code. Therefore we reschedule the jQuery call to allow Angular to do change detection and update the HTML and only then jQuery() will find the element there.

EnlitenedZA Over a year ago

If I put the JQuery in a timeout as you suggested, it loses it initial selection. I am setting initial selection on ngOnInit as follows: this.selectedItems = this.items[1];

Günter Zöchbauer Over a year ago

Can you create a Plunker? I don't use jQuery myself and it's hard to reason about what exactly might be going on from looking at the static code.

EnlitenedZA Over a year ago

I have created a Plunker: link. Please notice that the selected item is not displayed, it only does when you comment out the line: jQuery(this.elementRef.nativeElement).find('select').dropdown();

|

Collectives™ on Stack Overflow

Angular 2 Semantic UI Dropdown JS not working

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related