Angular PrimeNG Form Complete Reference
Last Updated :
23 Jul, 2025
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
AngularJS Basics
AngularJS TutorialAngularJS is a free and open-source JavaScript framework that helps developers build modern web applications. It extends HTML with new attributes and it is perfect for single-page applications (SPAs). AngularJS, developed by Google, has been important in web development since its inception in 2009.
5 min read
Introduction to AngularJSAngularJS is a popular open-source framework that simplifies web development by creating interactive single-page applications (SPAs). Unlike traditional websites that load new pages for each click, SPAs offer a smoother user experience by updating content on the same page. AngularJS makes this possi
4 min read
Angular CLI | Angular Project SetupAngular is an open-source front-end web application framework that is used for building single-page and complex web applications. By default, angular uses TypeScript for creating logic but as the browser doesn't know typescript it converts typescript into javascript in order to make typescript under
3 min read
AngularJS ExpressionsIn this article, we will see the Expressions in AngularJS, along with understanding their implementation through the examples. Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is writ
2 min read
AngularJS ModulesThe AngularJS module defines the functionality of the application which is applied on the entire HTML page. It helps to link many components. So it is just a group of related components. It is a container that consists of different parts like controllers, services, and directives. Note: These module
3 min read
AngularJS ng-model DirectiveThe ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
4 min read
AngularJS Data BindingIn this article, we will see the Data Binding in AngularJS, along with understanding the various types of Data Binding available with their implementations. Angular provides a function Data Binding which helps us to have an almost real-time reflection of the input given by the user i.e. it creates a
4 min read
AngularJS ControllersIn this article, we will see the Controller in AngularJS along with knowing how Controller works, the concept of the Controller method & how the Controller can be implemented in an external. We will understand all these aspects with the help of their implementation & accordingly will its ill
3 min read
AngularJS | ScopeScope in AngularJS is the binding part of HTML view and JavaScript controller. When you add properties into the scope object in the JavaScript controller, only then the HTML view gets access to those properties. There are two types of Scope in AngularJS. $Scope$rootScope Scope: There is few specific
2 min read
AngularJS ServicesThe Services is a function or an object that avails or limit to the application in AngularJS, ie., it is used to create variables/data that can be shared and can be used outside the component in which it is defined. Service facilitates built-in service or can make our own service. The Service can on
4 min read
AngularJS | AJAX - $httpThe AngularJS provides a control service named as AJAX - $http, which serves the task for reading all the data that is available on the remote servers. The demand for the requirement of desired records gets met when the server makes the database call by using the browser. The data is mostly needed i
3 min read
AngularJS | TablesThe data in tables are basically repeatable, so you can use ng-repeat directives to create tables easily The example will clear the approach. Syntax: <element ng-repeat="expression">Content..<element> Displayed Data in table. html <!DOCTYPE html> <html> <head> <title
2 min read
AngularJS Select BoxesThe Select Boxes in AngularJS can be utilized to create dropdown lists, that are based on the objects or an array. The Select box can be created in 2 ways, i.e., either by using the ng-options directive that is used to build and bind HTML elements with options to model property or by using the ng-re
2 min read
AngularJS SQLIn any web application, we need to save, update, insert and fetch data to and from a database. AngularJS is a JavaScript MVC (Model-View-Controller) framework developed by Google. It helps developers to build well-structured, easily testable, and maintainable front-end applications. Important Featu
3 min read
AngularJS HTML DOMThe HTML DOM in AngularJS facilitates the directives that bind the application data with the attributes of HTML DOM elements. In this article, we will see such directives that help to bind the data to the HTML DOM element's attribute, along with their basic implementations through the illustrations.
2 min read
AngularJS EventsAn Events in AngularJS can be used to perform particular tasks, based on the action taken. Both Angular Event & the HTML Event will be executed & will not overwrite with an HTML Event. It can be added using the Directives mentioned below: ng-mousemove: The movement of the mouse leads to the
3 min read
AngularJS | FormsForms are collection of controls that is input field, buttons, checkbox and these can be validated real time. As soon as a user of the form completes writing a field and moves to the next one it gets validated and suggests the user where he might have went wrong. So a form can be consisting of the m
3 min read
AngularJS Form ValidationAngularJS performs form validation on the client side. AngularJS monitors the state of the form and input fields (input, text-area, select), and notify the user about the current state. AngularJS also holds information about whether the input fields have been touched, modified, or not. Form input fi
3 min read
AngularJS | APIAngularJS APIs are used for comparing, iterating and converting objects.Basic AngularJS API includes angular.isString() angular.lowercase() angular.uppercase() angular.isNumber() 1. angular.isString() It is used to check whether an object is a string or not.It returns true if the object is string ot
2 min read
AngularJS and W3.CSSWhat is W3.CSS? W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS framework.Its aim is to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and DesktopW3.CSS was designed to be a high qualit
2 min read
AngularJS IncludesAngularJS includes, also called as ng-include directive, allows you to insert external HTML content dynamically into an AngularJS application. This capability is particularly useful for modularizing applications, improving code organization, and enhancing code reusability.Syntax:<element ng-inclu
3 min read
AngularJS AnimationsTo create animation effects in AngularJS using the ngAnimate module, which provides support for CSS-based animations. Animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using the ngAnimate module that gives us a combined effect
1 min read
AngularJS | ApplicationApplications in AngularJS enable the creation of real-time Applications. There are four primary steps involved in creation of Applications in AngularJS: Creation of List for an Application. Adding elements in the List. Removing elements from the List. Error Handling Below are the steps for creations
3 min read
AngularJS Directives
AngularJS Filters
AngularJS | FiltersThere are some filters that are added in the AngularJS for the sake of making the formatting and working with data easier. There are several in-built filters in AngularJS. They are listed here along with some examples to make the understanding easier. Basic Syntax: Filters are generally added to the
7 min read
AngularJS currency FilterAngularJS currency filter is used to convert a number into a currency format. If no currency format is specified currency filter uses the local currency format. Syntax: {{ currency_expression | currency : symbol : fractionSize}}Parameters: It contains 2 parameters as mentioned above and described be
2 min read
AngularJS | date FilterAngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is 'MMM d, yyyy'. Syntax: {{ date | date : format : timezone }} Parameter Values: The date filter contains format and timezone parameters which is optional.Some com
2 min read
AngularJS filter FilterThe "filter" Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array. Syntax: {{arrayexpression | filter: ex
3 min read
AngularJS json FilterThe json filter in AngularJs is used to convert a JavaScript object into a JSON. string.JavaScript object that we are using can be of any kind of JavaScript Object. The json filter piped the object or any expression with JSON so that the result will be displayed in the form of a list, which is bound
2 min read
AngularJS limitTo FilterThe limitTo filter in AngularJS is used to return an array or a string that contains a specified number of elements. This filter can be used with arrays, strings, and numbers. The basic principle, however, remains the same in all three cases: For arrays, it returns an array containing only the speci
2 min read
AngularJS lowercase FilterAngularJS provides different filters to format the data. The lowercase Filter formats the given string to the lowercase. In order to transmit & render the data from a TypeScript code to an HTML template (view), the interpolation concept can be utilized. The lowercase filter is piped with an expr
1 min read
AngularJS number FilterAngularJS number filter is used to convert a number into a string or text. We can also define a limit to display a number of decimal digits. The number filter rounds off the number to specified decimal digits. Syntax: {{ string| number : fractionSize}}Parameter Values: It contains single parameter v
1 min read
AngularJS orderBy FilterAn orderBy Filter in AngularJS is used to sort the given array to the specific order. The default order of sorting the string is in alphabetical order whereas the numbers are numerically sorted. By default, all the items are sorted in ascending order, if the ordering sequence is not specified. Synta
4 min read
AngularJs uppercase FilterThe uppercase Filter in AngularJS is used to change a string to an uppercase string or letters. Syntax: {{ string | uppercase}} Example: This example describes the use of the uppercase Filter in AngularJS. HTML <!DOCTYPE html> <html> <head> <title>uppercase Filter</title
1 min read
AngularJS Converting Functions
AngularJS Comparing Functions
AngularJS Questions
How to bundle an Angular app for production?Introduction Before deploying the web app, Angular provides a way to check the behavior of the web application with the help of a few CLI commands. Usually, the ng serves command is used to build, watch, and serve the application from local memory. But for deployment, the behavior of the application
4 min read
How to add many functions in one ng-click directive?The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when the button is clicked. The ng-click directive is a very handy tool used in AngularJS. When an HTML is clicked, the ng-click directive t
2 min read
How to directly update a field by using ng-click in AngularJS ?In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations. Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a
3 min read
How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ?Given an HTML document containing some options element and the task is to add an array of javascript objects dynamically with multiple selects using ng-repeat in angularJS. Approach: The task is done using ng-repeat which loops through an array. Let's call this array "models". Each select menu prese
3 min read
How to detect when an @Input() value changes in Angular?@Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper
3 min read
How to open popup using Angular and Bootstrap ?Adding Bootstrap to your Angular application is an easy process. Just write the following command in your Angular CLI. It will add bootstrap into your node_modules folder. ng add @ng-bootstrap/ng-bootstrap Approach: Import NgbModal module in the TypeScript file of the corresponding component, and th
2 min read
How to reload or re-render the entire page using AngularJS?While working with AngularJS we might come across a time when we want our user to switch contexts and re-render everything again.AngularJS provides a method by which we can re-render or even reload the entire page. So in this article, we will see how we can reload the route instead of just reloading
2 min read
How to add input fields dynamically on button click in AngularJS ?The task is to add an input field on the page when the user clicks on the button using AngularJs. Steps: The required component for the operation is created (add-inputComponent). In that component, html file (add-input.component.html) required html is written. In that HTML, the main div for input fi
2 min read
How to Create Button Dynamically with Click Event in Angular ?The task is to create a button dynamically with a click event using AngularJS, i.e., whenever someone clicks on the button then a new button gets created. The easiest way to create a button in AngularJS is to use the ng-repeat directive. We can easily hook up a repeat logic inside a button click eve
2 min read
How to use jQuery in Angular ?In this tutorial, we will learn how we can use jQuery with Angular. There are two ways in which we can use jQuery with Angular as discussed below: Table of Content By installing jQuery using the npm commandUsing jQuery CDN to use itBy installing jQuery using the npm commandYou can install the jQuery
2 min read
AngularJS Examples The following AngularJS section contains a wide collection of AngularJS examples. The AngularJS examples are categorized based on the topics including basics, directives, functions, and Miscellaneous. Each example section contains multiple approaches to solve the problems. Prerequisites: AngularJS T
2 min read