Angular PrimeNG StyleClass Component

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 see Angular PrimeNG StyleClass Component.

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

Angular PrimeNG StyleClass Component Properties:

• pStyleClass: This is used to used target the element to apply style class on. It accepts a valid CSS query or a target keyword.
• enterClass: It defines the class which will be applied to the target element when it begins to appear on the screen.
• enterActiveClass: It defines the class which will be applied to the target element during the enter animation.
• enterToClass: It defines the class which will be applied to the target element when the enter animation has been finished.
• leaveClass: It defines the class which will be applied to the target element when it begins to get hidden from the screen.
• leaveActiveClass: It defines the class which will be applied to the target element during leave animation.
• leaveToClass:  It defines the class which will be applied to the target element when the leave animation has been finished.
• hideOnOutsideClick: This boolean property defines 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 without any animation.

Target Keywords for pStyleClass Property:

• @next: Targets the next element of the current element.
• @prev: Targets the next element of the current element.
• @parent: Targets the parent element.
• @grandparent: Targets the grandparent (parent of the parent) element.

Syntax:

<button 
     pButton
     label="..." 
     pStyleClass="#gfg" 
     leaveClass="..."
     leaveActiveClass="..." 
     leaveToClass="...">
</button>
<div id="gfg"> ... </div>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

• Run the below command:

ng serve --open

Example 1: In this example, we used the toggleClass property of StyleClass to enable and disable a text input by toggling the p-disabled class on that element.

app.component.html

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

<button
    pButton
    class="block mb-4"
    label="Enable/Disable Input"
    pStyleClass="#gfg"
    toggleClass="p-disabled">
</button>

<input pInputText type="text"
       id="gfg">

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
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:

Example 2: This example shows how to add entering and leaving animations using StyleClass.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG StyleClass Component</h3>
<h4>Enter/Leave Animation Demo</h4>

<div class="mb-4">
    <button
        pButton
        class="mr-4"
        label="Hide Image"
        pStyleClass="#gfg"
        leaveActiveClass="imageOutAnimClass"
        leaveToClass="hidden">
    </button>

    <button
        pButton
        label="Show Image"
        pStyleClass="#gfg"
        enterClass="hidden"
        enterActiveClass="imageInAnimClass">
    </button>

</div>

<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo-200x200.png"
     alt="gfg_logo"
     id="gfg"/>

app.component.css

/* ImageInAnim */
@keyframes imageInAnim {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

/* ImageOutAnim */
@keyframes imageOutAnim {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.imageInAnimClass{
    animation: imageInAnim 2s linear;
}

.imageOutAnimClass{
    animation: imageOutAnim 2s 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';

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

Output:

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