Add note for SASS:/SCSS: replace /deep/ with ::ng-deep

[JanTrichter]

Angular version: 9.0.7

ngx-pagination version: 5.1.1

Description of issue: /deep/ is not working as proposed in the style section of the documentation when working with SASS. We should add a note that it only works with ::ng-deep when using the SASS compiler.

Steps to reproduce: Create Angular project that uses the SASS compiler, implement pagination in a component and try to overwrite the styles like written in the documentation:

// head
<style>
  .my-pagination /deep/ .ngx-pagination .current {
    background: red;
  }
</style>

// body
<pagination-controls class="my-pagination"><pagination-controls>

Expected result: Background of the active element should change accordingly to the css rule.

Actual result: No changes in appearance.

Have no time to provide a demo unfortunately, just wanted to change a quick thought.

Solution:

// head
<style>
  .my-pagination ::ng-deep .ngx-pagination .current {
    background: red;
  }
</style>

// body
<pagination-controls class="my-pagination"><pagination-controls>

[michaelbromley]

Thanks for bringing that to my attention!

[JanTrichter]

Should I create a PR or do you want to fix the issue yourself? ^^

[michaelbromley]

I just fixed it - GitHub lets you do so right in the browser so it only took a few seconds :)

[JanTrichter]

I saw that the changes were present in the GitHub Readme but the Readme on npm was not updated and now it's not there at all. Will the readme on the npm page update automatically?

[michaelbromley]

That would only update once a new version of the package is published.