Is it possible to modify the class within TypeScript code while utilizing the CSS library for styling?

Question

Is it possible to modify the class within TypeScript code while utilizing the CSS library for styling?

In my custom style sheet coustume-webkit.css, I have the following code snippet:

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

Within my HTML markup, I am using the pagination class in this manner:

      <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 am interested in dynamically managing the text content: "avanti"; within this class from TypeScript. Can you provide me with suggestions on how to access and manipulate the content: "avanti"; property from TypeScript code?

css angular typescript

Answer 1

Answer №1

To manage the content of pseudo-elements like ::before and ::after, you can use data attributes externally. Simply add a data attribute to the desired HTML tag and utilize the CSS attr() function to extract the content from that tag.

Here is the updated 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;
}

And the modified 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>

You can now set a property called dataValue in your Angular component to handle the content:

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

Further Reading:

How can I write data attributes using Angular?
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Explore these links for more information

Answer 2

To manage the content of pseudo-elements like ::before and ::after, you can use data attributes externally. Simply add a data attribute to the desired HTML tag and utilize the CSS attr() function to extract the content from that tag.

Here is the updated 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;
}

And the modified 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>

You can now set a property called dataValue in your Angular component to handle the content:

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

Is it possible to modify the class within TypeScript code while utilizing the CSS library for styling?

Answer №1

Similar questions

Angular 16 HttpClient post request with asynchronous action

Looking to conceal an <hr> element using jQuery's slideToggle function and then reveal it when clicked once more

Is there a feature in Stepper that allows for event handling when steps are changed?

Designing the button outline variant with Material-UI styling

Customize button appearance within mat-menu in Angular versions 2 and above

NG0900: Issue encountered while attempting to compare '[object Object]'. Please note that only arrays and iterable objects are permitted for comparison

Steps to minimize the Bootstrap expanded menu on devices such as iPhone, iPad, Smartphones, tablets, etc. by simply tapping outside of the menu

When using Angular's auxiliary routes, everything works smoothly in a local environment. However

Problem with Silverstripe: Replicating Site configuration or settings menu

NestJs encountering issues with reading environment variables

Incorporate a smooth transition effect to a dynamically resizing div button

Leveraging the power of animate.css library to enhance page transitions on Nuxt

Guide to implementing the collapsible start and stop button feature in Angular

What is the best way to confine a child div with a dynamic height?

A step-by-step guide on coding a slider image

When I define a type in TypeScript, it displays "any" instead

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

What is the reason behind my phone burger not working and how can I resolve the problem?

Sending information from a component to a route in Angular2

Using the <hr> tag in HTML to create a horizontal line is proving to be a challenge for me