Css issue in angular 6

Question

In my angular 6 app. There are many components I have created. For display data I have used ng2-smart-table.

I have some specific requirement to hide default pagination bar. And display custom pagination.

For that I have just set css in component's SCSS file.

::ng-deep .ng2-smart-pagination-nav {
   display: none
}

But this is also affects in all other components also.

Till I know and RND on that, In angular we used each component has their each scss file. So my question is why this css affect to all other component also? And how to prevent in this issue ?

Answer 1

The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component

Use

:host Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).

:host ::ng-deep .ng2-smart-pagination-nav {
  display: none
}