Angular PrimeNG StyleClass Target

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.

StyleClass is used to manage CSS classes during entering or leaving animation or just to toggle a class on an element without animation. To target an element we can use a CSS selector or the target keywords provided by PrimeNG as the value of the pStyleClass property. There are a total of 4 target keywords.

StyleClass 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="@next"
     ...
></button>

<div class="..."> ... </div>

Creating Angular application & Module installation:

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

ng new app

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

cd app

Step 3: Install PrimeNG in your given directory.

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

Project Structure: The project structure will look like the following:

Project Structure

Run the below command:

ng serve --open

Example 1: This example shows the use of the toggleClass property of StyleClass. Here, we used the @next keyword to target the next element.

app.component.html

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

<button
    pButton
    label="Disable Next Button"
    pStyleClass="@next"
    toggleClass="p-disabled">
</button>

<button
    pButton
    label="Button"
    class="p-button-success mt-4">
</button>

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        button{
            display: block;
        }
        `
    ]
})

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:

Example 2: In this example, we used the @prev target keyword to target the previous element and disable it.

app.component.html

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

<input pInputText class="input" type="text" />

<button
    pButton
    label="Disable Previous Input"
    pStyleClass="@prev"
    toggleClass="p-disabled" >
</button>

app.component.ts

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        button{
            display: block;
            margin-top: 15px;
        }
        `
    ]
})

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

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

export class AppModule { }

Output:

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