Angular PrimeNG StyleClass Component Last Updated : 28 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 appnameStep 2: After creating your project folder i.e. appname, move to it using the following command. cd appnameStep 3: Finally, Install PrimeNG in your given directory. npm install primeng --save npm install primeicons --saveProject Structure: The project Structure will look like this after following the above steps: Project StructureRun the below command:ng serve --openExample 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 Comment More infoAdvertise with us Next Article Angular PrimeNG StyleClass ToggleClass V vpsop Follow Improve Article Tags : Web Technologies AngularJS Angular-PrimeNG PrimeNG-Directives Similar Reads Defer ComponentAngular PrimeNG Defer ComponentAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. 4 min read Angular PrimeNG Defer CallbackAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for various tasks like inputs, menus, charts, Buttons, etc. In this article, we will discuss Angular PrimeNG Defer Callback. The Defer Component is used to postpone the loading of th 4 min read Angular PrimeNG Defer EventsAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for various tasks like inputs, menus, charts, Buttons, etc. In this article, we will discuss Angular PrimeNG Defer Events. The Defer component is used to postpone the loading of the 3 min read Focus Trap ComponentAngular PrimeNG Focus Trap ComponentAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Component in Angular PrimeNG. We will also learn 3 min read Angular PrimeNG Focus Trap InputAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Focus Trap Input in Angular PrimeNG. The Focus Trap is u 3 min read Angular PrimeNG Focus Trap Float LabelAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Focus Trap Float Label in Angular PrimeNG. The Focus Tra 3 min read Angular PrimeNG Focus Trap Disabled InputAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Disabled Input in Angular PrimeNG. We will also 3 min read Angular PrimeNG Focus Trap Input with tabindex -1Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Input with tabindex -1 in Angular PrimeNG. We wi 3 min read Angular PrimeNG Focus Trap ButtonAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Button in Angular PrimeNG. We will also learn ab 2 min read Angular PrimeNG Focus Trap Disabled ButtonAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Disabled Button in Angular PrimeNG. We will also 3 min read Angular PrimeNG Focus Trap Button with tabindex -1Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Button with tabindex -1 in Angular PrimeNG. We w 3 min read Angular PrimeNG Focus Trap DropdownAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Dropdown in Angular PrimeNG. We will also learn 3 min read Angular PrimeNG Focus Trap EditorAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Editor in Angular PrimeNG. We will also learn ab 3 min read Angular PrimeNG Focus Trap PropertiesAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Focus Trap Properties in Angular PrimeNG. We will also l 3 min read StyleClass ComponentAngular PrimeNG StyleClass ComponentAngular 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 4 min read Angular PrimeNG StyleClass ToggleClassAngular 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 durin 3 min read Angular PrimeNG StyleClass AnimationsAngular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will be seeing Angular PrimeNG StyleClass Animations. StyleClass is used to manage C 3 min read Angular PrimeNG StyleClass Enter/Leave AnimationAngular 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 Enter/Leave Animation. The StyleClass is used to manage CSS cla 4 min read Angular PrimeNG StyleClass TargetAngular 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 ent 3 min read Angular PrimeNG StyleClass PropertiesAngular 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. The StyleClass is used to manage CSS classes during 4 min read Ripple ComponentAngular PrimeNG Ripple DirectiveAngular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Ripple Directive. The Ripple Directive is used to apply a ripple effect animation to t 3 min read Angular PrimeNG Ripple DirectiveAngular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Ripple Directive. The Ripple Directive is used to apply a ripple effect animation to t 3 min read Angular PrimeNG Ripple StylingAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see Angular PrimeNG Ripple Styling. The Ripple Component is used to apply a ripple effect an 3 min read Like