how to style ngx-bootstrap components in angular?

Question

I want to change nav-link style

This is my try in my.component.scss

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 {
            }
        }
    }

}

But it doesn't work...

Template in my.component.html

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

    tab content
</tab>
</tabset>

How I can do it?

Answer 1

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