how to style ngx-bootstrap components in angular?

You need to wrap your CSS with an pseudo class called ::ng-deep provided by angular. This will turn off view-encapsulation and your styles will become global. However this will change the styles of all the instances of the components that use that ngx-tabset component, so you need to use the :host pseudo class selector.

Your code should look like something like this:

[your-component].component.scss file:

:host {
  ::ng-deep {
    tabset {
      a {
        .nav-link {
          background: #ffffff;
          border: 1px solid #dde6fb;
          border-radius: 4px;
          font-family: 'Open Sans', sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          text-align: center;
          color: #000000;

          &.active {
          }
        }
      }
    }
  }
}

and your html:

<tabset>
<tab>
    <ng-template tabHeading>
        Tab 3
        <span
              class="badge">12</span>
    </ng-template>

    tab content
</tab>
</tabset>

You can read up more on this: https://angular.io/guide/component-styles

:host { enter your styles here }

please follow instruction below in angular doc https://angular.io/api/core/ViewEncapsulation#ShadowDom

There are two ways to add custom styles to ngx-bootstrap components (specifically Tab component) if you can't customize them directly using CSS:

1. If we use encapsulation: ViewEncapsulation.None in our component file then using style changes like .nav-link.disabled, .nav-link:disabled { color: white; } or .nav-link {background-color: green} in your component CSS will work but making ViewEncapsulaion as None means making the styles of that component global which may affect the styles of your other components.

2. If we use customClass property of tab inside tabset like <tab customClass="custom-tab-style"> and then using global style file which is styles.scss in your root folder (.src) like .custom-tab-style{ .nav-link.disabled, .nav-link:disabled{ color: white; } } will work fine without needing to set ViewEncapsulation as None and it will also not affect any other component style as long as the class name is unique.