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

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 >
            <li  [ngClass]="{'disabled': pageActive === 1}"
            </li>
            <li  [ngClass]="{'active': page===pageActive}"
                *ngFor="let page of _totalPageSlice">               
            </li>
            <li  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?

CodePudding user response：

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 >
            <li  [ngClass]="{'disabled': pageActive === 1}"
            </li>
            <li  [ngClass]="{'active': page===pageActive}"
                *ngFor="let page of _totalPageSlice">               
            </li>
            <li  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