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. |
Angular PrimeNG Form Complete Reference
Angular PrimeNG Form facilitates the various input components for taking the input field & validating, which helps to design a responsive form for a single-page-application, that enhances the user experience, along with increasing the user interactivity in the Web application.
There are various components that are provided by the Angular PrimeNG Form, which are listed below with their brief description.
Contact Us