Search code examples
angularjsangular-strap

ngStrap Dropdown template

I'm pretty new to angular and I'm using angular strap to customize a dropdown button because I wanted some HTML formatting on the resulting dropdown options.

I've managed to successfully assign a template to the dropdown options, but now I want to also style the button itself with another template.

Because I wanted it to look from this:

Old Button Style

To this:

enter image description here

Is this possible?

This is how my HTML tag looks now:

<button class="form-control custom-select" data-html="1" ng-model="myModel" bs-options="icon.value as icon.label for icon in icons" data-template-url="dropdown.tpl.js"  bs-select></button>
Solution

  • What you're asking for requires only some CSS. When your HTML is compiled, the ouput (what is displayed on the browser) is:

    <button class="form-control custom-select"
        data-html="1
        ng-model="myModel"
        bs-options="icon.value as icon.label for icon in icons"
        data-template-url="dropdown.tpl.js"
        bs-select>
   <!-- placeholder -->
   <span class="caret"></span>
</button>

    You have to customize the text alignment of your button and also the shape and position of the caret (which is a bootstrap class that creates an arrow).

    You can find some advice here.

    EDIT:

    To use your HTML, you can pass a caretHtml argument for bsSelect directive:

    <button class="form-control custom-select"
        data-html="1
        ng-model="myModel"
        bs-options="icon.value as icon.label for icon in icons"
        data-template-url="dropdown.tpl.js"
        data-caret-html="<span class='myClass'></span>"
        bs-select>
   <!-- placeholder -->
   <span class="caret"></span>
</button>

    This solution is not in the doc of Angular Strap but caretHtml argument exists in the source code. Be careful it may be removed in future updates.