Angular PrimeNG Form Complete Reference
Last Updated :
27 Sep, 2023
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.
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. |
|---|
Similar Reads
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 Directives Complete Reference
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 us
3 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 Form TreeSelect Component
Angular 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 the Angular PrimeNG Form TreeSelect Component. The TreeSelect Compone
8 min read
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 Form TreeSelect Single Component
Angular 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 the Angular PrimeNG Form TreeSelect Single Component. The TreeSelect
4 min read
Angular PrimeNG Form Rating Properties Component
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 Angular PrimeNG Form Rating Properties Component. The Form Rating Component is a selection i
3 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 Form TreeSelect Events
Angular 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 the Angular PrimeNG Form TreeSelect Events. The TreeSelect Component
4 min read
Angular PrimeNG Form Rating Events Component
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 be seeing Angular PrimeNG Form Rating Events Component. The Form Rating Component is a selec
4 min read