How can I change the class in ts code when the style is in the css library

Question

In coustume-webkit.css I have this code:

.tabella .pagination > li:last-child > a:before, .tabella .pagination > li:last-child > span:before {
    padding-right: 5px;
    content: "avanti";
    width: 60px;
}

in html code I used pagination class like this:

      <ul class="pagination">
            <li class="paginate_button previous" [ngClass]="{'disabled': pageActive === 1}"
            </li>
            <li class="paginate_button" [ngClass]="{'active': page===pageActive}"
                *ngFor="let page of _totalPageSlice">               
            </li>
            <li class="paginate_button next" id="{{id}}_{{id}}_next"
                [ngClass]="{'disabled': pageActive === _totalPage}" label="_next">
            </li>
        </ul>

I want to manage the content: "avanti"; in this class from ts code. Can you give me an idea how to access the content: "avanti"; from ts code?

You could use CSS Variables and change them inside your javascript/typescript Code: https://www.w3schools.com/css/css3_variables_javascript.asp — , Jun 10 '22 at 12:51
for your information I tried to list all stylesheets loaded on the page, intercepting that specific rule and changing the content value. It doesn't change. While background for example does. So I guess there are restrictions and it could be a dead end for using that strategy. The custom property suggested above could be a good compromise so that it's written once and used many times and easy to change. But it depends on your exact scenario — Diego D, Jun 10 '22 at 12:56

Andreas · Accepted Answer · 2022-06-10T14:22:24.887

The content of ::before and ::after elements can be externally managed with data attributes. Add a data attribute to the targeted HTML tag and use the CSS attr() function to read the content from the tag.

adjusted CSS code:

.tabella .pagination > li:last-child > a:before, .tabella .pagination > li:last-child > span:before {
    padding-right: 5px;
    content: attr(data-name);
    width: 60px;
}

adjusted HTML code

<ul class="pagination">
            <li class="paginate_button previous" [ngClass]="{'disabled': pageActive === 1}"
            </li>
            <li class="paginate_button" [ngClass]="{'active': page===pageActive}"
                *ngFor="let page of _totalPageSlice">               
            </li>
            <li class="paginate_button next" id="{{id}}_{{id}}_next"
                [ngClass]="{'disabled': pageActive === _totalPage}" label="_next">
                <a [attr.data-name]="dataValue">Some link</a>
            </li>
        </ul>

Now you can have a dataValue-property in your angular component that can handle the content:

@Component({
  ...
})
export class MyComponent {
  public dataValue = "avanti";
}

Checkout

for more information

If you can not edit the CSS code, because it's from some external library, then you have to use something with a higher specificity. This should work: .tabella .pagination > li:last-child > a:before[data-name], .tabella .pagination > li:last-child > span:before[data-name] { content: attr(data-name); } — Andreas, Jun 10 '22 at 14:30

How can I change the class in ts code when the style is in the css library

1 Answers1