0

I'm converting my <select> to be more angular 2 in syntax. I'm using Angular 2 but I was using Jquery for my <select> which was bad practice but it worked. Now clicking it does not make anything happen (no dropdown appears). Is it possible to see why nothing happens by looking at the output html?

HTML:

<select _ngcontent-iwn-11="" class="form-control ng-untouched ng-pristine ng-valid" id="find-category-select" multiple="" name="categories" required="" disabled="" ng-reflect-required="" ng-reflect-name="categories" ng-reflect-model="">


   <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object]"
}--><optgroup _ngcontent-iwn-11="" ng-reflect-label="grocery products" label="grocery products" style="
    width: 400px;
    height: 100px;
">
     <!--template bindings={
  "ng-reflect-ng-for-of": "meat,dairy,confectionary,dessert,baking,condiments,beverages,Dr IQ,Magma,Tornado"
}--><option _ngcontent-iwn-11="">
       meat
     </option><option _ngcontent-iwn-11="">
       dairy
     </option><option _ngcontent-iwn-11="" style="
    height: 100px;
    width: 400px;
">
       confectionary
     </option><option _ngcontent-iwn-11="">
       dessert
     </option><option _ngcontent-iwn-11="">
       baking
     </option><option _ngcontent-iwn-11="">
       condiments
     </option><option _ngcontent-iwn-11="">
       beverages
     </option><option _ngcontent-iwn-11="">
       Dr IQ
     </option><option _ngcontent-iwn-11="">
       Magma
     </option><option _ngcontent-iwn-11="">
       Tornado
     </option>
   </optgroup><optgroup _ngcontent-iwn-11="" ng-reflect-label="meals" label="meals">
     <!--template bindings={
  "ng-reflect-ng-for-of": "African,American,Argentine,Asian,Asian Fusion,BBQ,Bakery,Beverages,Brazilian,Breakfast,British,Cafe,Cambodian,Chinese,Coffee and Tea,Contemporary,Continental,Deli,Desserts,Drinks Only,European,Fijian,Filipino,Finger Food,Fish and Chips,French Fusion,German,Greek,Grill,Healthy Food,Ice Cream,Indian,Indonesian,International,Irish,Italian,Japanese,Jewish,Juices,Kiwi,Korean,Latin,American,Lebanese,Malaysian,Mediterranean,Mexican,Middle Eastern,Mongolian,Moroccan,Nepalese,North Indian,Pacific,Persian,Pizza,Portuguese,Pub Food,Seafood,Singaporean,South Indian,Spanish,Sri Lankan,Steakhouse,Street Food,Sushi,Taiwanese,Thai,Turkish,Vietnamese"
}--><option _ngcontent-iwn-11="">
       African
     </option><option _ngcontent-iwn-11="">
       American
     </option><option _ngcontent-iwn-11="">
       Argentine
     </option><option _ngcontent-iwn-11="">
       Asian
     </option><option _ngcontent-iwn-11="">
       Asian Fusion
     </option><option _ngcontent-iwn-11="">
       BBQ
     </option><option _ngcontent-iwn-11="">
       Bakery
     </option><option _ngcontent-iwn-11="">
       Beverages
     </option><option _ngcontent-iwn-11="">
       Brazilian
     </option><option _ngcontent-iwn-11="">
       Breakfast
     </option><option _ngcontent-iwn-11="">
       British
     </option><option _ngcontent-iwn-11="">
       Cafe
     </option><option _ngcontent-iwn-11="">
       Cambodian
     </option><option _ngcontent-iwn-11="">
       Chinese
     </option><option _ngcontent-iwn-11="">
       Coffee and Tea
     </option><option _ngcontent-iwn-11="">
       Contemporary
     </option><option _ngcontent-iwn-11="">
       Continental
     </option><option _ngcontent-iwn-11="">
       Deli
     </option><option _ngcontent-iwn-11="">
       Desserts
     </option><option _ngcontent-iwn-11="">
       Drinks Only
     </option><option _ngcontent-iwn-11="">
       European
     </option><option _ngcontent-iwn-11="">
       Fijian
     </option><option _ngcontent-iwn-11="">
       Filipino
     </option><option _ngcontent-iwn-11="">
       Finger Food
     </option><option _ngcontent-iwn-11="">
       Fish and Chips
     </option><option _ngcontent-iwn-11="">
       French Fusion
     </option><option _ngcontent-iwn-11="">
       German
     </option><option _ngcontent-iwn-11="">
       Greek
     </option><option _ngcontent-iwn-11="">
       Grill
     </option><option _ngcontent-iwn-11="">
       Healthy Food
     </option><option _ngcontent-iwn-11="">
       Ice Cream
     </option><option _ngcontent-iwn-11="">
       Indian
     </option><option _ngcontent-iwn-11="">
       Indonesian
     </option><option _ngcontent-iwn-11="">
       International
     </option><option _ngcontent-iwn-11="">
       Irish
     </option><option _ngcontent-iwn-11="">
       Italian
     </option><option _ngcontent-iwn-11="">
       Japanese
     </option><option _ngcontent-iwn-11="">
       Jewish
     </option><option _ngcontent-iwn-11="">
       Juices
     </option><option _ngcontent-iwn-11="">
       Kiwi
     </option><option _ngcontent-iwn-11="">
       Korean
     </option><option _ngcontent-iwn-11="">
       Latin
     </option><option _ngcontent-iwn-11="">
       American
     </option><option _ngcontent-iwn-11="">
       Lebanese
     </option><option _ngcontent-iwn-11="">
       Malaysian
     </option><option _ngcontent-iwn-11="">
       Mediterranean
     </option><option _ngcontent-iwn-11="">
       Mexican
     </option><option _ngcontent-iwn-11="">
       Middle Eastern
     </option><option _ngcontent-iwn-11="">
       Mongolian
     </option><option _ngcontent-iwn-11="">
       Moroccan
     </option><option _ngcontent-iwn-11="">
       Nepalese
     </option><option _ngcontent-iwn-11="">
       North Indian
     </option><option _ngcontent-iwn-11="">
       Pacific
     </option><option _ngcontent-iwn-11="">
       Persian
     </option><option _ngcontent-iwn-11="">
       Pizza
     </option><option _ngcontent-iwn-11="">
       Portuguese
     </option><option _ngcontent-iwn-11="">
       Pub Food
     </option><option _ngcontent-iwn-11="">
       Seafood
     </option><option _ngcontent-iwn-11="">
       Singaporean
     </option><option _ngcontent-iwn-11="">
       South Indian
     </option><option _ngcontent-iwn-11="">
       Spanish
     </option><option _ngcontent-iwn-11="">
       Sri Lankan
     </option><option _ngcontent-iwn-11="">
       Steakhouse
     </option><option _ngcontent-iwn-11="">
       Street Food
     </option><option _ngcontent-iwn-11="">
       Sushi
     </option><option _ngcontent-iwn-11="">
       Taiwanese
     </option><option _ngcontent-iwn-11="">
       Thai
     </option><option _ngcontent-iwn-11="">
       Turkish
     </option><option _ngcontent-iwn-11="">
       Vietnamese
     </option>
   </optgroup>


</select>

My actual angular 2 template is:

<select  id="find-category-select"  
         class="form-control" 
         multiple required
         [(ngModel)]="selectedCategories"
         name="categories"
         #multiselect>


   <optgroup *ngFor="let category of categories" label="{{category.name}}">
     <option *ngFor="let subcategory of category.subCategories">
       {{subcategory}}
     </option>
   </optgroup>


</select>
<div id="icon" class="form-item-right-icon"></div>

And in my afterViewInit I am making the select be a bootstrap multiselect plugin like this:

(<any>$("#find-category-select")).multiselect({
    buttonWidth: '100%',
    buttonContainer: '<div style="height: 34px;" />',
    buttonClass: 'none',
    nonSelectedText: "select categories",
    nSelectedText: ' categories',
    allSelectedText: "all categories",
    selectAllNumber: false,
    onDropdownShown: function () {
        $('ul .caret-container').click();
    },
    onDropdownHidden: function () {
        $('ul .caret-container').click();
    },
    maxHeight: 400,
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true,
    includeSelectAllOption: false,
    disableIfEmpty: true,
    onSelectAll: () => {
        this.changed();
    },
    onChange: (option: any, checked: any) => {
        this.changed();
    }
});
BeniaminoBaggins
  • 11,202
  • 41
  • 152
  • 287

1 Answers1

1

Remove disabled=""

It's the same as disabled="true" or disabled. Only removing the attribute entirely enables the element.

See also

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks. Strangely it is being added automatically. I just posted my angular 2 html template. Should I be looking into how to remove disabled or maybe is there something I'm doing wrong which is causing the disabled to be there? – BeniaminoBaggins Nov 10 '16 at 08:46
  • What do you mean by "it is being added automatically"? If this is actually the case there has some other code to be involved. Are you using some non-Angular widget library? – Günter Zöchbauer Nov 10 '16 at 08:48
  • I don't know about the bootstrap multiselect plugin, but I have no doubt it is setting the `disabled` attribute. – Günter Zöchbauer Nov 10 '16 at 08:52
  • I just mean I'm not writing "disabled" anywhere. Yes I'm using a plugin for the select called bootstrap multiselect. Which may be why I didn't make it be very angular 2 in code implementation. I just added that information to the bottom of my question. – BeniaminoBaggins Nov 10 '16 at 08:52
  • All good. I sometimes like to stick to raw jquery/javascript etc when I use plugins like this to avoid these strange behaviours of the plugin when there may not be much support for it being implemented with angular 2 syntax. I'm reminded why i've done it this way now. Thanks for pointing out the issue in the html. – BeniaminoBaggins Nov 10 '16 at 08:58