CODEWITHSUNDEEP
cssangularsass
clem
clem

Reputation: 897

Angular 7: Why class style is not applied to DOM component?

I have a component billing that includes ngb-tabset component of Ng Bootstrap.

ngb-tabset has the following DOM element:

<ngb-tabset _ngcontent-c3="" class="content">
  <!-- Tabset links-->
  <div class="tab-content">
    <div _ngcontent-c3="">
      <!-- Content -->
    </div>
  </div>
</ngb-tabset>

<div class="tab-content"> is dynamically displayed according the selected tab.

In my billing.component.scss, the following snippet doesn't work:

.tab-content {
  padding-right: 120px;
}

The CSS code is correctly compiled and, normally, seen by navigator but not effect on the item.

But if I apply it on the item outside the component, the code works correctly.

Any idea about this strange behavior?

Upvotes: 3

Views: 3911

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73731

Method 1 - Set style classes in the tab content template

View encapsulation isolates the CSS styling of each component, preventing the parent component CSS from affecting the child components. The preferred solution in the present case would be to set the style classes in the tab content template definition. Here is an example:

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="my-style-1">
        <p>Some content</p>
      </div>
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

.my-style-1 {
  padding-right: 120px;
  color: magenta;
  font-style: italic;
}

See this stackblitz for a demo.

Method 2 - Use the ::ng-deep pseudo-class selector

Another method is to use the ::ng-deep shadow-piercing descendant combinator to style the content of the NgbTabset child component:

::ng-deep .tab-content {
  padding-right: 120px;
}

See this stackblitz for a demo.

Method 3 - Turn off view encapsulation

Alternatively, you could turn off the view encapsulation of the parent component:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

See this stackblitz for a demo.

Upvotes: 7

Shofol
Shofol

Reputation: 733

Angular uses shadow DOM. That means it keeps DOM logics separate from other elements. Components have scoped styles of their own. They are encapsulated in a way that the styles should not effect globally. So, if you want to change ngb-tabset's style you have to come out of its scope. That's why you need to use ViewEncapsulation.None.

In @Component decorator use ViewEncapsulation.None

@Component({
selector: ....,
encapsulation: ViewEncapsulation.None,
styles: [...])}

And, you can use ng-deep also. But you should not use ng-deep because it will be deprecated. See here- https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Upvotes: 0

Related Questions