Angular PrimeNG StyleClass Properties

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 Properties.

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

Angular PrimeNG StyleClass Properties:

• pStyleClass: This property is used to target the element on which the StyleClass is to be applied. It accepts a string value which can be a valid CSS query or a target keyword.
• enterClass: This property defines the class to add when the target element begins to appear on the screen.
• enterActiveClass: This property defines the class to add during the enter animation.
• enterToClass: This property defines the class to add when the enter animation has been completed.
• leaveClass: This property defines the class to add when the target element begins to get hidden from the screen.
• leaveActiveClass: This property defines the class to add during leave animation.
• leaveToClass: This property defines the class to add when the leave animation has been completed.
• hideOnOutsideClick: This property states whether to trigger the leave animation when outside of the element is clicked.
• toggleClass: This property is used to toggle a class for an element when no enter or leave animation is required.

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:

<button 
     pButton
     label="..." 
     pStyleClass="@next" 
     leaveClass="..."
     leaveActiveClass="..." 
     leaveToClass="...">
</button>
<div class="..."> ... </div>

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:

Example 1: This example shows the use of the toggleClass property of StyleClass. The toggleClass property is used when we do not want to apply any enter or leave animation to an element.

app.component.html

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

<button pButton label="ToggleClass dark-mode"
    pStyleClass="@next"
    toggleClass="dark-mode">
</button>

<div class="content">
    GeeksforGeeks is a computer science
    portal for geeks. It offers articles
    on various computer science subjects
    like Data Structures, Algorithms,
    Compiler Design, Computer Networks, etc.
</div>

app.component.css

.content {
    background-color: rgb(112, 255, 119);
    width: 300px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
}

.dark-mode{
    background-color: rgb(9, 8, 8);
    color: white;
}

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

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';

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

export class AppModule { }

Steps to run the application:

Execute the below command from the root directory of the project to run the app.

ng serve --open

Output:

Example 2: This example shows how to add the enter and leave animations using StyleClass properties.

app.component.html

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

<div class="block">
    <button pButton label="Show the Input"
        class="mr-3" pStyleClass=".input"
        enterClass="hidden"
        enterActiveClass="inAnimation">
    </button>

    <button pButton label="Hide the Input"
        pStyleClass=".input"
        leaveActiveClass="outAnimation"
        leaveToClass="hidden">
    </button>
</div>
<input pInputText class="input" type="text" />

app.component.css

.content {
    background-color: rgb(112, 255, 119);
    width: 300px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
}

input{
    margin-top: 20px;
}

/* Enter animation */
@keyframes inAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Leave Animation */

@keyframes outAnim {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.inAnimation {
    animation: inAnim .5s linear;
}

.outAnimation {
    animation: outAnim .5s linear;
}

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

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 { InputTextModule } from 'primeng/inputtext';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule,
        InputTextModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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