Chosen.js in Angular2 does not recognize changes

Question

I use the chosen.js library for displaying/rendering dropdowns. I have the following dropdown html:

<select [(ngModel)]="myModel" data-placeholder="Some Dropdown Value" id="my-dropdown"
    class="chosen-select" (change)="onChange($event.target.value)">
<option value=""></option>
<optgroup label="Group 1">
    <option *ngFor="let entry1 of entries1" [ngValue]="entry1['id']"
            class="dropdown-item">
        {{entry1['name']}}
    </option>
</optgroup>
<optgroup label="Group 2">
    <option *ngFor="let entry2 of entries2" [ngValue]="entry2['id']"
            class="dropdown-item">
        {{entry2['name']}}
    </option>
</optgroup>

This select perfectly works, changes get recognized and myModel has the correct values.

When using chosen.js, the select html from above gets transferred to this:

<div class="chosen-container chosen-container-single chosen-container-active" title="" id="my_dropdown_chosen" style="width: 250px;">
<a class="chosen-single">
    <span>Some Dropdown value</span>
    <div><b></b></div>
</a>
<div class="chosen-drop">
    <div class="chosen-search">
        <input class="chosen-search-input" type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
        <li class="group-result">Group 1</li>
        <li class="active-result group-option dropdown-item" data-option-array-index="2" style="">
            Some Value 1
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="3" style="">
            Some Value 2
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="4" style="">
            Some Value 3
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="5" style="">
            Some Value 4
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="6" style="">
            Some Value 5
        </li>
    </ul>
</div>

The dropdown looks quite good, but the changes of course do not get recognized any longer as it is totally different html, which got rendered during run time of the app. How can you do this?

Is there something like the angular chosen library, but for Angular 2 instead of 1?

Did you find any library for that? – katwhocodes Jul 03 '18 at 13:28 — katwhocodes, Jul 03 '18 at 13:28

score 0 · Answer 1 · answered Nov 09 '17 at 22:14

0

You must find a "chosen library" for angular 2, you can't just implement the js file because you won't have context of angular component.

Maybe it could help you: Angular-chosen

answered Nov 09 '17 at 22:14

Abel Valdez

2,368
1
16
33

That is for Angular 1. I use Angular 2. In my last sentence I ask for such a library :-) Seems that there is none. – tester Nov 10 '17 at 15:20

Chosen.js in Angular2 does not recognize changes

1 Answers1