NgbDropdown: remove dropdown arrow

Solution

Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:

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

Why?

By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.

Doing this removes it.

Here is a LIVE DEMO demonstrating it.

How do you work it out?

Using chrome dev tools you can inspect the element:

We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:

The pseudo-element is no longer there!!:

add the following style to override the default one

.dropdown-toggle::after{    content:initial }

LIVE DEMO

In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false:

$enable-caret: false;

This overrides the default value of true set in the Bootstrap's _variable.scss:

// Options//// Quickly modify global styling by enabling or disabling optional features.$enable-caret:                                true !default;

But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.