Angular PrimeNG StyleClass ToggleClass

Angular PrimeNG is an open-source framework for Angular applications. It has a rich set of native UI components that can be used to make attractive and scalable web interfaces. In this article, we will discuss Angular PrimeNG StyleClass ToggleClass.

The StyleClass is used to manage CSS classes during entering and leaving animations of a component or to toggle a class on an element. The toggleClass property is used to add and remove a specific class on an element.

Angular PrimeNG StyleClass ToggleClass Properties:

• toggleClass: This property is used to specify a class that will be added and removed.
• pStyleClass: This property is used to target the element. It accepts a valid CSS query or a target keyword.

Target Keywords for pStyleClass property:

• @next: This keyword is used to target the next element of the current element.
• @prev: This keyword is used to target the next element of the current element.
• @parent: This keyword is used to target the parent element.
• @grandparent: This keyword is used to target the grandparent (parent of the parent) element.

Syntax:

<element pButton label="Toggle"
        pStyleClass="@target" 
        toggleClass="CSS-Class-To-Toggle">
    Content...
</element>

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Project Structure

Example 1: This is the basic example that shows the use of the toggleClass property. Here the element is targeted using the element id.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass ToggleClass</h4>

<button
      pButton
      label="Toggle the .p-button-lg
            Class on Below Button"
      pStyleClass="#btn"
      toggleClass="p-button-lg">
</button>
<button
      pButton
      label="Button"
      id="btn"
      class="block mt-3">
</button>

app.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
export class AppComponent{}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { StyleClassModule } from 'primeng/styleclass';
import { FormsModule } from "@angular/forms";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ButtonModule,
        StyleClassModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule{}

• Steps to run the app: Run the below command from the root directory of your project.

ng serve --open

Output:

Example 2: In this example, the target keywords are used to target the elements.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass ToggleClass</h4>

<button
      pButton
      label="Toggle the Warning Severity
            Class for Below Button"
      pStyleClass="@next"
      toggleClass="p-button-warning">
</button>
<button
      pButton
      label="Button"
      class="block mt-3">
</button>
<button
      pButton
      label="Button"
      class="block mt-3">
</button>
<button
      pButton
      class="mt-3"
      label="Toggle the Success Severity
            Class for Above Button"
      pStyleClass="@prev"
      toggleClass="p-button-success">
</button>

app.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
export class AppComponent{}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { StyleClassModule } from 'primeng/styleclass';
import { FormsModule } from "@angular/forms";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ButtonModule,
        StyleClassModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule{}

Output:

Reference: http://primefaces.org/primeng/styleclass