Angular PrimeNG Directives Complete Reference

Last Updated : 03 Oct, 2023

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 Component

The 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 Callback	This event accepts a callback function that is invoked when the deferred content is loaded.
Defer Events	This 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 Input	Focus Trap input focuses on the input element when it is accessed either by tab key or by clicking on it.
Focus Trap Float Label	This class is used to float the input label when focusing on a certain DOM element while tabbing.
Focus Trap Disabled Input	It specifies that the component should be disabled. It is of the boolean data type, the default value is false.
Focus Trap Input with tabindex -1	It describes an element’s tab order while navigating with the “tab” button.
Focus Trap Button	Angular 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 Button	It specifies the button to be disabled if the value is set to true. The default value is false.
Focus Trap Button with tabindex -1	It describes an element’s tab order while navigating with the “tab” button.
Focus Trap Dropdown	Focus Trap dropdown focuses on the element when any value is selected from the dropdown menu.
Focus Trap Editor	Focus Trap is used to maintain focus on certain DOM elements while we tab with the tab key.
Focus Trap Properties	It 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 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
StyleClass Animations	StyleClass 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 Animation	The Enter/Leave animation properties are used to add or remove specific classes at various stages of the enter/leave animation.
StyleClass Target	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 Properties	The 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 Directive	The Ripple Directive is used to apply a ripple effect animation to the host element.
Ripple Styling	The Ripple Component is used to apply a ripple effect animation to the host element.

Angular PrimeNG Messages Complete Reference

kartik

Improve

Article Tags :

Angular PrimeNG Directives Complete Reference

Defer Component

Focus Trap Component

StyleClass Component

Ripple Component

Similar Reads

Thank You!

What kind of Experience do you want to share?