Make arrow icon on ngbDropdownToggle optional

[rhegner]

I used the plain bootstrap dropdowns in table headers for implementing filtering capability. It looked like this:

I'm now migrating to using ng-bootstrap and it looks like the ngbDropdownToggle directive automatically adds a little arrow icon. This might be desirable in most cases, but in this case it looks a bit strange:

So my feature request would be an option which allows to prevent adding that arrow icon.

[pkozlowski-opensource]

Need to think about this API more... The obvious solution would be to remove the dropdown-toggle CSS class altogether from NgbDropdownToggle but this has drawbacks:

• it would be a breaking change;
• it would require more code for typical use-case usage.

[noturnocs]

test ;P
.dropdown-toggle::after{
display: none;
}

[SGissubel]

Display: none Only works for initial views... but NOT for ng-container/template if/else statements.
^ Works on most of my dropdowns - but when I use the ng-template that only displays in certain situations - display none does not work initially - until you click the actual button.

it's just a button. It should only be a button - no icon. There are tons of other resources to add icons/arrows etc. after the fact if desired.

[azerafati]

I believe styling options should be all left to Bootstrap and it has been a mistake to add dropdown-toggle automatically and force it. If we are using Bootstrap then we are supposed to follow the framework's structure, and add the class (or decide not to) as clearly shown in Bootstrap's examples.

[ScottMichaud]

One possible solution, now that reversing the decision would be a breaking change, is to add an extra CSS rule that looks for the state of an attribute.

In my case:

.dropdown-toggle[data-no-icon="true"]::after {
  display: none;
}

Then I add data-no-icon="true" (no square brackets in my case although it can be upgraded to use Angular's data bindings) as an HTML attribute to the dropdown button elements that I want to hide the down-arrows on. (If anyone stumbled across this issue trying to find a solution, then this will work.)

Another possibility is adding another directive that has a different selector than ngbDropdownToggle.

You can also break backward compatibility when you increment the version (ex: to Bootstrap 5).