Angular PrimeNG Directives Complete Reference Last Updated : 03 Oct, 2023 Comments Improve Suggest changes Like Article Like Report Angular PrimeNG Directives provides various components, such as defer, Focus Trap, StyleClass, & Ripple, that facilitate the different effects on the component, while loading the content, along with including the animation styling to make interactive web applications, along with enhancing the user experience. The complete list of Directives Components is listed below with their brief description: Defer ComponentThe Defer component pauses or postpones the loading of content that is initially not in the viewport until it becomes visible on the scroll. Components Descriptions Defer CallbackThis event accepts a callback function that is invoked when the deferred content is loaded. Defer EventsThis event accepts a callback function that is invoked when the deferred content is loaded. Focus Trap Component Angular PrimeNG Focus Trap Component is used to maintain focus on certain DOM elements while we tab with the tab key. Components Descriptions Focus Trap InputFocus Trap input focuses on the input element when it is accessed either by tab key or by clicking on it. Focus Trap Float LabelThis class is used to float the input label when focusing on a certain DOM element while tabbing. Focus Trap Disabled InputIt specifies that the component should be disabled. It is of the boolean data type, the default value is false. Focus Trap Input with tabindex -1It describes an element’s tab order while navigating with the “tab” button. Focus Trap ButtonAngular PrimeNG Focus Trap is used to specify whether elements can only focus on elements inside the dialog. It is of the boolean datatype, the default value is true. Focus Trap Disabled ButtonIt specifies the button to be disabled if the value is set to true. The default value is false. Focus Trap Button with tabindex -1It describes an element’s tab order while navigating with the “tab” button. Focus Trap DropdownFocus Trap dropdown focuses on the element when any value is selected from the dropdown menu. Focus Trap EditorFocus Trap is used to maintain focus on certain DOM elements while we tab with the tab key. Focus Trap PropertiesIt specifies that the component should be disabled. It is of the boolean data type, the default value is false. StyleClass Component The StyleClass Component is used to manage CSS classes during entering and leaving animations of a component or to toggle a class on an element. Components Descriptions StyleClass ToggleClassThe StyleClass is used to manage CSS classes during entering and leaving animations of a component or to toggle a class on an element StyleClass AnimationsStyleClass is used to manage CSS classes on an element. It can be used to implement enter and leave animations of an element. StyleClass Enter/Leave AnimationThe Enter/Leave animation properties are used to add or remove specific classes at various stages of the enter/leave animation. StyleClass TargetTo 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 PropertiesThe StyleClass is used to manage CSS classes during entering and leaving animations of a component or to toggle a class on an element. Ripple Component The Ripple Component is used to apply a ripple effect animation to the host element. Components Descriptions Ripple DirectiveThe Ripple Directive is used to apply a ripple effect animation to the host element. Ripple StylingThe Ripple Component is used to apply a ripple effect animation to the host element. Comment More infoAdvertise with us Next Article Angular PrimeNG Directives Complete Reference kartik Follow Improve Article Tags : Web Technologies AngularJS Angular-PrimeNG PrimeNG-Directives Similar Reads AngularJS Directives Complete Reference Directives are markers in the Document Object Model(DOM). Directives can be used with any of controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present which is predefined but if a developer wants he can create new directives ( 2 min read Angular PrimeNG File Complete Reference Angular PrimeNG Files provides different components to retrieve the information related to the file, along with facilitating the file manipulation, & other operations, in order to modify the file content. This enhances the overall user experience. FileUpload Component has an advanced uploader fa 2 min read Angular PrimeNG Form Complete Reference Angular PrimeNG Form facilitates the various input components for taking the input field & validating, which helps to design a responsive form for a single-page-application, that enhances the user experience, along with increasing the user interactivity in the Web application. There are various 15+ min read Angular PrimeNG Messages Complete Reference Angular PrimeNG Messages Component provides various types of facilities, such as Message Service and severity, Static and dynamic Content, different form layouts, etc., in order to render the status of the Message to the user. Messages Component The Messages Component can be used to display a messag 2 min read Angular PrimeNG Overlay Complete Reference Angular PrimeNG Overlay facilitates the rendering of the content/ confirmation windows, which is shared with multiple actions for the same component. The overlay can also be created dynamically for the dialogs to display the content, & can also displayed from the edges of the screen by making th 6 min read Angular PrimeNG Utilities Complete Reference Angular PrimeNG Utilities facilitates the service that helps to filter the collections by including the constraints within the Table. The complete list of Utility Components is listed below with their brief description: FilterService ComponentThe Filter Service Component is a helper utility that hel 1 min read Angular PrimeNG Menu Reference Angular PrimeNG Menu provides different components, such as MenuModel, Breadcrumb, ContextMenu, MegaMenu, etc., that help to build the menus and submenus that share the common API, along with rendering an overlay menu on right click of its target. This component also helps the user to navigate throu 8 min read AngularJS Questions Complete Reference AngularJS is a JavaScript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It is a continuously growing and expanding framework which provides better ways for developing web applications. This is the most used framework in India compare to other fron 8 min read Angular PrimeNG Badge Directive Angular 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 Badge Directive. The Badge Component is used as an indicator for other e 2 min read Built-in directives in Angular Directives are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (cus 5 min read Like