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