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:
- 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" > w3wiki </ 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" >w3wiki</ 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.w3wiki.net/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 2 s linear; } .imageOutAnimClass{ animation: imageOutAnim 2 s 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