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

Question

I have a component billing that includes ngb-tabset component of Ng Bootstrap. ngb-tabset has the following DOM element: <!-- Tabset links-->

<!-- 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? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

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:

Some content

... .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.