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 components that are provided by the Angular PrimeNG Form, which are listed below with their brief description.

AutoComplete Component

The AutoComplete Component in Angular PrimeNG facilitates real-time suggestions while the user is typing in the input component.

Components	Descriptions
Model Driven Forms Component	The Model Driven Forms can be used with the AutoComplete Component, in order to automatically suggest the next word depending upon the context.
Dropdown Component	It is used to display a button next to the input field where the click behavior of the button is defined using the dropdownMode property that takes “blank” or “current” as possible values.
Multiple Selection Component	It is used to select more than one value from the autocomplete.
Objects Component	The Form AutoComplete Objects Component is used to define the label to display as a suggestion with a field attribute. This component helps to make the interactive Form AutoComplete by implementing the different stylings provided by Angular PrimeNG.
Force Selection Component	It is used to validate the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions.
Templating Component	The Templating Component allows displaying custom content inside the suggestions panel.
Animation Configuration Component	Animation Configuration Component is used to set the transition time of the animation and the transition of the show and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties.
Properties Component	The Form AutoComplete is an input field that facilitates real-time suggestions while the user enters the data in the input field.
Templates Component	The AutoComplete Component is an input component that provides real-time suggestions when being typed. It uses ngModel for two-way binding, which requires a list of suggestions and a completeMethod to query for the results.
Styling Component	It contains various styling classes that can be utilized to include the structural style to the Form Component.

Calendar Component 

The Calendar Component can be used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.

Components	Description
Model Driven Forms Component	PrimeNg  Calendar is an input component to select a date.
Popup and Inline Component	The Calendar Component is used to input the user’s date and time. By default, the calendar is shown in popup mode but the inline property can be used to display it in inline mode.
Selection Mode Component	The Calendar Component is used to input the user’s date and time. Users can select only one date by default but multiple dates can be selected by setting the selectionMode property to multiple.
DateFormat Component	The Calendar Component is used to input the user’s date and time. The default date format of the calendar component is “mm/dd/yy”. The dateFormat property is used to customize the date format. The below options can be used as a part of the date format.
Time Component	The Calendar Component is used to input the user’s date and time. The time picker in a calendar is used to enable the user to pick the time. It can be shown with or without the calendar. The hourFormat property is used to specify the time format to use.
Date Restriction Component	The Calendar Component is used for date and time input from the user. To restrict selectable dates to a range set the readonlyInput property to true so that users cannot enter dates using the keyboard.
Disable specific dates and/or days Component	The Calendar Component is used for date and time input from the user. To disable specific dates and/or dates first set the readonlyInput to true so that the user cannot enter the dates using the keyboard.
Button Bar Component	The Calendar component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month. The Button Bar Component can be used to display the buttons for the current date & clear the selected option on the footer section of the calendar by enabling the showButtonBar property.
Multiple Months Component	Angular PrimeNG Form Calendar Multiple Months Component is used to show multiple months calendar at the same time. The number of calendars depends on the number specified in the [numberOfMonths] property.
Custom Content Component	The Calendar Component is used to input the user’s date and time. Custom content can be added to the calendar by using the header and footer templates provided by the calendar component.
Month Picker Component	Angular PrimeNG Form Calendar Month Picker Component is used to pick the month of the corresponding year.
Year Picker Component	Angular PrimeNG Form Calendar Year Picker Component is used to pick the year within a certain range.
Touch UI Component	The Calendar Component is used to input the user’s date and time. The Calendar Touch UI mode is optimized for touch devices and can be enabled by setting the touchUI property to true.
Animation Configuration Component	The Calendar component is used to display a calendar that allows the user to select dates and move to the next or previous month.
Properties Component	The Calendar Component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
Events Component	The Calendar Component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
s Component	It is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
Templates Component	The Calendar Component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
Styling Component	The Form Calendar component is used to take input of date and/or time from the user. There are 11 structural styling classes for the calendar component which are listed below.

CascadeSelect Component

The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.

Components	Description
Basic Component	Angular PrimeNG Form CascadeSelect Basic is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
Templating Component	CascadeSelect Templating Component: It is used to display the content of an item that can be customized with the option template.
Events Components	This component is used to make the CascadeSelect component functional.
Properties Component	The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
Templates Component	The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
Styling Component	The CascadeSelect Styling is used to display a nested structure of options and provide different styles.

Checkbox Component

The Checkbox Component is an extension to the standard checkbox element with theming.

Components	Description
Basic Component	The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A checkbox component is generally used to take input of a boolean value.
Multiple Component	The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming. A multiple-checkbox component can also be created by specifying the .field-checkbox class
Checkbox Dynamic Values, Preselection, Value Binding and Disabled Option Component	The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming.
Label Component	The label property of the checkbox component is used to set the label text for the checkbox. The label of the checkbox is clickable and it toggles the value of the checkbox when clicked.
Boolean Value Component	The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A boolean variable can be bounded to the checkbox by using the ngModel property and by setting the binary option to true.
Model Driven Forms Component	The model-driven form can be used with the CheckBox Component.
Properties Component	Checkbox Properties Component: It is an extension to the standard checkbox element with theming and properties are used to add some extra features to the component.
Events Component	The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming and is used to take input of boolean value from the user. There is only one event for the checkbox component
Checkbox s Component	It is an extension to the standard checkbox element with theming.
Checkbox Styling	It is an extension to the standard checkbox element with theming

Chips Component

The Chips Component can be utilized to include the multiple values on an input field.

Components	Description
Basic Component	It is used to set multiple values to enter for an input field.
Comma Separator Component	The Chips Component in PrimeNG is used to take input of many values in a single field. By default, a chip beaks when we press the enter key but this behavior can be altered by using the separate property.
Template Component	It is used to enter multiple values on an input field with an icon.
Model Driven Forms Component	The Chips Component is used to take input of multiple values in a single input element.
Custom Content Component	The Chips Component is used to take input of multiple values in a single input element. It is commonly used to take input of filters on popular e-commerce websites.
Properties Component	It is used to enter multiple values on an input field.
Events Component	The Form Chips Component in PrimeNG takes the input of many values in a single field. The use of chips can be seen on most e-commerce websites like Flipkart, Amazon, etc.
Templates Component	It is used to enter multiple values on an input field with an icon.

ColorPicker Component 

The ColorPicker Component can be used to make a component in which users can select colors.

Components	Description
Formats Component	The ColorPicker component is used to take color input from the user. It can give values in three formats.
Overlay and Inline Component	The ColorPicker Component is used to take input of color from the user. In the inline color picker, the color selection box is shown to the user but in overlay mode, the color picker overlay appears when the user selects the colored div.
Model Driven Forms Component	The ColorPicker Component is used to take the input of color from the user.
Animation Configuration Component	The ColorPicker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.
Properties Component	The Color Picker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.
Events Component	The Color Picker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.
Styling Component	The ColorPicker Component is used to make a component in which users can select colors. The Styling Component helps to make the interactive Form ColorPicker by implementing the different stylings provided by Angular PrimeNG.

Dropdown Component

The Dropdown Component can be used to make to choose the objects from the given list of items. 

Components	Description
Basic Component	In a Dropdown Component, we provide users with a list of options out of which users can select any one option. It is generally used in implementing filters, asking for the country of the user, etc.
Editable Component	In a Dropdown Component, we provide users with a list of options out of which users can select any one option. It is generally used in implementing filters, asking for the country of the user, etc.
Group Component	is used for creating groups of options.
Advanced with Templating, Filtering and Clear Icon Component	This type of dropdown is the advanced one in which we will be using the templating, filtering and clear icons.
Virtual Scroll Component	The Virtual Scroll Component is used to create a virtual scroll at the correct position to scroll the items in the dropdown menu.
Value Binding Component	The Form Dropdown Component provides the user with a list of options from which any one option can be selected by the user.
Disabled Options Component	This is used to disable any component by using optionDisabled property.
Model Driven Forms Component	The Form Dropdown component gives the user a list of options where any one option can be selected
Custom Content Component	It is used for both selected options and the options list can be templated to provide customized representation.
Virtual Scrolling Component	The Virtual Scrolling Component is used to create a virtual scroll at the correct position to scroll the items in the dropdown menu.
Animation Configuration Component	The Form Dropdown component gives the user a list of options where any one option can be selected
Properties Component	The Properties Component is used to provide different properties to modify the dropdown
Events Component	It is used to make to choose the objects from the given list of items.
Dropdown s Component	It is used to make to choose the objects from the given list of items.
Templates Component	The Dropdown component is used to make to choose the objects from the given list of items. The Templates Component is used to define the template of the dropdown component.
Styling Component	Dropdown Styling classes are used to style the dropdown according to our needs.

Editor Component

The Form Editor is a Quill-based rich text editor component. There are various components provided by Angular PrimeNG, which are described below.

Components	Description
Default Component	The Angular PrimeNG Form Editor is a Quill-based rich text editor component.
Custom Toolbar Component	The Angular PrimeNG Form Editor is a Quill-based rich text editor component. The form editor toolbar may be customized to have various editing options accessible as per the user’s requirements.
Model Driven Forms Component	Editor is a Quill-based rich text editor component.
Component	The Angular PrimeNG Form Editor is a Quill-based rich text editor component. The form editor toolbar may be customized to have various editing options accessible as per the user’s requirements.
Properties Component	The Form Editor is a Quill-based rich text editor component.
Events Component	The Form Editor is a Quill-based rich text editor component.
Methods Component	The Form Editor is a Quill-based rich text editor component. There are various components provided by Angular PrimeNG, which are described below.
Templates Component	The Form Editor is a Quill-based rich text editor component.
Styling Component	The Styling Component helps to make the interactive Form Editor Styling by implementing the different stylings provided by Angular PrimeNG.

FloatLabel Component 

FloatLabel component is the floating label that can be used on the input component.

InputGroup Component 

InputGroup component allows a user to input content.

Components	Description
Addons Component	The InputGroup component allows a user to input content.
Multiple Addons Component	The InputGroup Component allows a user to input content.
Button Addons Component	The InputGroup Component allows a user to input content.
Checkbox and RadioButton Component	The InputGroup Component allows a user to input content.

InputMask Component 

InputMask component allows a user to input value in a certain format which includes numeric, date, currency and phone.

Components	Description
Mask Component	The InputMask component allows user to input values in a certain format which includes numeric, date, currency, and phone. Combinations of the following built-in definitions are possible for mask format.
SlotChar Component	The InputMask component allows users to input values in a certain format which includes numeric, date, currency, and phone.
Optional Values Component	The InputMask guides the user about what value to enter in the input. It betters the user experience on our application. A part of the Input can be made optional with the ‘?’ symbol.
Properties Component	This component is used to enter input in a certain format such as numeric, date, currency and phone.
Events Component	The InputMask Component provides the user with a specific format that he has to abide by when entering the data. The data can be anything such as date, phone number, currency, etc.
Methods Component	The InputMask component allows user to input values in a certain format which includes numeric, date, currency, and phone
Styling Component	The InputMask Component provides the user with a specific format that he has to abide by when entering the data. The data can be anything such as date, phone number, currency, etc.

InputSwitch Component 

The InputSwitch Component is used to take a boolean input from the user. It has two states, on and off. It can be turned on initially by binding its value with a boolean variable set to true. There is only one event associated with the InputSwitch component which is given below.

Components	Description
InputSwitch Basic Component	The InputSwitch component allows a user to switch between the two values ie, selecting either of them by toggling it.
Model Driven Forms Component	The Model Driven Forms can be used with Form Component for selecting boolean values we use inputswitch
Properties Component	The InputSwitch Component is used to select a boolean value.
Events Component	The InputSwitch Component is used to take a boolean input from the user. It has two states, on and off. It can be turned on initially by binding its value with a boolean variable set to true. There is only one event associated with the InputSwitch component which is given below.
Styling Component	The Form InputSwitch is used to take input of a boolean value from the users. It can be bonded to a boolean variable using the ngModel directive provided by Angular itself. If the bonded variable is set to true, the InputSwitch will be enabled by default.

Inputtext Component

The Inputtext Component is an element that is used to make a text field with multi-line input support.

Components	Description
Basic Component	The Inputtext component is an element used for entering data created by inputText.
Model Binding Component	The InputTextArea component is an element that is used to make a text field with multi-line input support.
Float Label Component	The Inputtext component is an element used for entering data created by inputText.
Icons Component	The Inputtext component is an element used for entering data created by inputText. Depending on where the icon will be placed within the input field, an element with the class p-input-icon-right or p-input-icon-left can be used to surround both the input and the icon
Sizes Component	The Inputtext Component is an element used for entering data created by inputText. There are 2 other sizes available in addition to the standard input; use p-inputtext-sm for a smaller input and p-inputtext-lg for a bigger one.
Outlined vs Filled Component	The Inputtext Component is an element used for entering data created by inputText.
Addons Component	Other elements like text, icons, buttons, etc. can be grouped with text input by wrapping the other elements and the input field inside the p-inputgroup class. The addon elements should have a p-inputgroup-addon class applied to them.
Properties Component	This is a boolean property. When it is present, the input element will be disabled.
Styling Component	The Angular PrimeNG Form InputText Component renders a field for taking input of text data from the user. InputText can be applied to a text input element by applying the pInputText directive.

InputTextarea Component

The InputTextarea Component is an element that is used to make a text field with multi-line input support.

Components	Description
Default Component	It is used for user input a basic form layout featuring PrimeNG textarea
Float Label Component	The Inputtext component is an element used for entering data created by inputText.
Model Binding Component	The InputTextArea component is an element that is used to make a text field with multi-line input support.
AutoResize Component	It is an element that is used to make a text field with multi-line input support.
Properties Component	We can set if the textarea size should increase on increasing the text. Textarea will not display scrollbar as the size of textarea increases.
Events Component	When an element resizes, a callback is invoked
Styling Component	InputText can be applied to a text input element by applying the pInputText directive.

InputNumber Component

An InputNumber Component allows a user to input content as a numerical value. All the components are given below .

Components	Description
Decimal Mode Component	The InputNumber Component allows a user to input content as a numerical value. When no additional configuration is present, the default value of the mode property, “decimal” restricts input to the integers format that is configured using this property.
Currency Component	The InputNumber Component allows a user to input content as a numerical value. Setting the mode option to currency and the currency property will specify the currency formatting.
Prefix and Suffix Component	The InputNumber Component allows a user to input content as a numerical value. With the use of prefix and suffix attributes, custom texts, such as units, may be positioned before or after the input section.
Buttons Component	The InputNumber Component allows a user to input content as a numerical value. Spinner buttons may be activated using the showButtons attribute, and buttonLayout controls layout. “Stacked” is the default value. The other two are “horizontal” and “stacked”.
Step Component	The InputNumber Component allows a user to input content as a numerical value. The default step factor is 1 & it can be customized with the help of the step option.
Min and Max Boundaries Component	Min and Max Boundaries Component in Angular PrimeNG. We will also learn about the properties, along with their syntaxes that will be used in the code.
Properties Component	The InputNumber component allows a user to input content as a numerical value.
Method Component	The Form InputNumber Component is used to take numerical input from the user. The custom styling of the InputNumber component can be done using the structural style classes listed below.
Events Component	The Form InputNumber Component is used to take numerical input from the user. The InputNumber component can be bound to a number variable using the ngModel directive provided by Angular itself.
Styling Component	The Form InputNumber Component is used to take numerical input from the user. The custom styling of the InputNumber component can be done using the structural style classes listed below.

Invalid State Component 

The Invalid State Component can be used to show an invalid state style in the form module. When the class is set to invalid, it will provide the style for the input element as invalid.

Form Knob Component

The Knob component is a form component that is used to define a dialer type knob that contains labels and some data values.

Components	Description
Minimum and Maximum Component	The minimum and maximum value of the knob can be specified using the min and max properties of the component. The default minimum value of the knob is 0 and the maximum value is 100.
Step Component	Using the Knob component makes the website more interactive and betters the user experience. The Knob step is a facto by which the value of the Knob will increase or decrease in one change.
Size Component	Using the Knob component makes the website more interactive and betters the user experience.
Properties Component	The knob component is a form component that is used to define a dialer-type knob that contains labels and some data values.
Events Component	he Knob Component is used to take numerical input from the user with a dial. The knob’s value can be bounded to a number variable defined in the app.component.ts file
Styling Component	There are 3 structural styling classes

KeyFilter Component

The KeyFilter component can used to set the data type that is to be used for an input field. It also filters other data types from the entered data types.

Components	Description
Built-in Filters Component	There are 8 built-in filters: pint, int, pnum, num, hex, email, alpha, alphanum,
Custom Filter Component	The Custom Filter can be used to bind the regular expression with the help of the pKeyFilter property.
Validate Mode Component	To enable the Validate Mode, the pValida teOnly property can be utilized which will validate the entire input data with a built-in Angular validator.
Properties Component	The KeyFilter component is used to set the data type that is to be used for an input field. It also filters other data types from the entered data types.

Listbox Component

The ListBox component can be used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list.

Components	Description
Value Binding Component	the option value property of the Listbox can be used to specify the property of the model to be used as the value.
Selection Component	is used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list.
Disabled Options Component	s used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list. By enabling the optionDisabled property, which prevents the particular options from getting selected.
Filter Component	allow one to search for the item from the given list by providing the input field at the header.
Model Driven Forms Component	for selecting one or more values from a list we use listbox
Custom Content Component	Custom Content helps to define the item named ng-template, where the local ng-template variable refers to an option in the options collection.
Properties Component	he various Listbox Properties Components that are facilitated by the Angular PrimeNG
Events Component	When users interact with the listbox component in a specific way, some events are triggered by the list box.
Templates Component	Templates like header, footer, etc, are used to put some content on some pre-structured containers.
Styling Component	. There are a total of five structural styling classes that can be used to alter the styles of the Listbox component according to our needs.

MultiSelect Component

The Multiselect Component provides the user with a list of options where the user can select one or more options. The properties of the MultiSelect Component are listed below.

Components	Description
Template Mode Component	The number of selected items can be accessed using {0} in the value of the selectedItemsLabel property.
Elipsis Mode Component	The ellipsis mode can be enabled explicitly by setting the selectedItemsLabel property to “ellipsis”.
Chips Display Component	default the selected options are displayed in plain text separated with a comma. To enable the chips display mode, the display property can be set to “chip”.
Grouped Component	The grouping of the MultiSelect option allows us to group similar options together which helps users to find the relevant option quickly and betters the user experience.
Advanced with Templating and Filtering Component	MultiSelect Component can be used to select multiple values from the menu. The Templating Component is mainly used to provide a template and the Filtering Component is used to filter the options from the given list.
Virtual Scrolling Component	VirtualScrolling is an effective method for rendering the options. To avoid performance issues when dealing with a large number of options, VirtualScrolling should be enabled.
Value Binding Component	The value of an option in MultiSelect is bounded to the model itself but we can use the optionValue property of Multiselect to pass the custom value for the options.
Disabled Options Component	The individual options of the MultiSelect component can be displayed by passing a boolean property of the options object as the value of the optionDisabled property.
Model Driven Forms Component	for selecting multiple items we use multiselect
Custom Content Component	Define an ng-template named item whose local ng-template variable identifies an option in the options collection for custom content support when displaying options.
Animation Configuration Component	We can pass the animation configuration to the showTransitionOptions and hideTransitionOptions properties.
Selected Items Label Component	This can be changed by specifying a template string using the selectedItemsLabel property where the number of selected items can be accessed using {0} in the template.
Properties Component	The Multiselect component is used to provide the user with a list of options where one or more than one options can be selected by the user. The properties of the MultiSelect Component are listed below.
Events Component	The Form MultiSelect Component allows users to select multiple options from the set of provided options.
Templates Component	The MultiSelect Component is used to select multiple values from the menu. There are various templates provided by the Angular PrimeNG Form, in order to organize in a structured way & can be grouped, in order to categorize the form.
Styling Component	There are 9 structural styling classes of the Multiselect component which can be used to customize the style according to one’s needs.

Password Component

The Password Component can be used to represent the strength indicator for the password fields.

Components	Description
Basic Component	The Password Component is used to represent the strength indicator for the password fields
Password Meter Component	The Password Component is used to represent the strength indicator for the password field
Show Password Component	The Password Component is used to represent the strength indicator for the password fields.
Templating Component	The header, content, and footer are these. Note that the default meter is superseded by content.
Model Binding Component	The ngModel directive is used to bind the model with the password component.
Customization Component	The Password Component is used to represent the strength indicator for the password fields. For medium and strong passwords, the password component employs regular expressions with the following settings.
Properties Component	The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user.
Events Component	The Password Component is used to take input of the sensitive information from the user. It changes all the characters entered by the user into bullets
Templates Component	The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user
Styling Component	The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user

RadioButton Component

The RadioButton Component allows the user to select one option at a time from a set.

Components	Description
Basic Component	The RadioButton Component allows the user to select one option at a time from a set. This is an extension for the radio button element that has various theming.
Dynamic Values, Preselection, Value Binding and Disabled Option Component	The RadioButton Component allows the user to select one option at a time from a set.
Model Driven Forms Component	primeNG we use the extension of radio button
Label Component	The RadioButton Component allows the user to select one option at a time from a set.
Properties Component	The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input.
Events Component	The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input.
Methods Component	The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input. The events of the RadioButton are listed below.
Styling Component	The Form RadioButton Component is built on top of the HTML radio input element with theming.

Rating Component

The Rating Component can be used to represents the rating given by the user.

Components	Description
Rating Basic Component	The Rating component is used to represent the rating given by the user.
Rating No Cancel Component	We cannot change the value of the component. It is of the boolean data type, the default value is false.
Rating ReadOnly Component	It indicates the number of stars to be shown. It is of number datatype, the default value is 5.
Rating Disabled Component	he Form Rating Component is a selection input based on the star icon. It can be usually seen on product pages of e-commerce websites like Amazon, Flipkart, Alibaba, etc.
Model Driven Forms Component	PrimeNg AutoComplete model provides star based for the inputs.
Properties Component	The Form Rating Component is a selection input based on the star icon.
Rating Events Component	The Form Rating Component is a selection input based on the star icon.
Rating Styling Component	It can be usually seen on product pages of e-commerce websites like Amazon, Flipkart, Alibaba, etc.

Slider Component

The Slider Component can be utilized as an input field having numeric values with a drag handle.

Components	Description
Basic Component	The Slider Component facilitates an input element that accepts numerical inputs.
Input Component	It is used to specify two boundary values to be picked, It is of the boolean data type, and the default value is false.
Step Component	The Slider Component is an element of input that accepts numerical inputs.
Model Driven Forms Component	PrimeNg AutoComplete model provides drag handle for the inputs.
Min-Max Component	The Slider Component is an element of input that accepts numerical inputs.
Range Component	It is used to specify two boundary values to be picked, It is of the boolean data type, and the default value is false
Orientation Component	It is used to set the orientation of the slider, valid values are horizontal and vertical, It is of string data type, and the default value is horizontal.
Properties Component	It can be used to take numerical input from the users
Events Component	It can be used to take numerical input from the users.
Styling Component	Using a slider for taking inputs from the user makes out website more interactive and betters the user experience.

SelectButton Component

The SelectButton Components can be used to make a group of buttons from which the user can select a value.

Components	Descriptions
Single Selection Component	The SelectButton Component is used to make a group of buttons from which the user can select a value.
Multiple Selection Component	It is an array representing select items to display as the available options. It is of array data type, the default value is null.
Custom Template Component	It is an array representing select items to display as the available options. It is of array data type, the default value is null.
Value Binding Component	The optionValue property can be utilized to customize the property to pass as the value, as the option itself, by default, is bound to the model.
Selection Component	.In the Selection Component, the SelectButton permits the selection of either single or multiple items,
Disabled Options	It is used to disable the option by using the corresponding name. It is of string type and the default value is disabled.
Model Driven Forms Component	PrimeNg SelectButton model choose single or multiple items from a list using buttons.
Custom Content Component	Create an ng-template for supporting custom content when the local ng-template variable points to a choice from the options collection.
Properties	The SelectButton component is used to make a group of buttons from which the user can select a value. There are various properties contained by the Form SelectButton,
Events	The SelectButton component is used to make a group of buttons from which the user can select a value.

ToggleButton Component

The ToggleButton Component can be used to make a button that users can toggle by clicking on it

Components	Description
Basic Component	The ToggleButton Component is used to make a button that users can toggle by clicking on it.
Customized Component	Angular PrimeNG Form ToggleButton Customized Component Properties:
Model Driven Forms Component	PrimeNg ToggleButton is used to select a boolean value using a button. using buttons.
Labels Component	The ToggleButton Component is used to make a button that users can toggle by clicking on it. The onLabel and offLabel properties can be utilized to customize the Labels.
Icons Component	The onIcon and offIcon attributes of a ToggleButton are used to specify the icon’s appearance, and the iconPos property is used to change the icon’s position.
Properties	Angular PrimeNG Form ToggleButton Properties are onLable ,offLable , onIcon, offIcon etc.
Events	Its label can be changed based on its current state using the onLabel and offLabel properties.
Styling	Its label can be changed based on its current state using the onLabel and offLabel properties

TreeSelect Component

The TreeSelect Component allows the users to select items from hierarchical data.

Components	Descriptions
Single Component	The TreeSelect Component allows the users to select items from hierarchical data.
Multiple Component	It accepts an array of TreeNodes as its options property to show the data.
Checkbox Component	In the TreeSelect checkbox selection mode, a checkbox is displayed next to every item and it can be used to select the item and all the items that come under it in the hierarchy.
TreeNode API utilized	The TreeSelect Component allows the users to select items from hierarchical data. It accepts an array of TreeNodes as its options property to show the data.
Selection Mode Component	In the TreeSelect multiple selection mode, multiple items from the hierarchy can be selected.
Chips Display Component	The items that have been selected are shown by default as a comma-separated list,
Templating	we can simply define the value template which will retrieve the selected nodes as a parameter.
Properties	There are different properties available that can be used to enhance the application, along with increasing user interactivity.
Events	When the overlay is shown, a callback is triggered.
Templates	The Templates like the footer, header, and value are used to put some content on some pre-structured containers.
Styling	This component helps to make the interactive TreeSelect by implementing the different stylings provided by Angular PrimeNG.

TriCheckbox Component

The TriCheckbox Component allows a user to make a checkbox with three states ie, true, false & null conditions.

Components	Descriptions
Model Driven Forms	The Model Driven Forms can be used with TriStateCheckbox Component.
Properties	It is used to give the name of the element. It is of string data type, the default value is null.
Events	The TriCheckbox Component allows a user to make a checkbox with three states ie, true, false & null conditions.
Styling	It contains the list of various structural style classes that is used to decorate the TriStateCheckbox.