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!!:

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.

add the following style to override the default one

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

LIVE DEMO