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:
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" >w3wiki</ 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" >w3wiki</ 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