Angular PrimeNG is an open-source framework with a rich set 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 learn how to use the Angular PrimeNG Form MultiSelect Custom Content 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.
Form MultiSelect Custom Content: 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. In a similar vein, the selectedItems template can be customized to show the selected options.
Templates for the header, filter, footer, and empty filter can also provide a customized message for each. A group template is also available to customize the option groups when grouping is enabled. The options instance is set as the default local template variable in all templates.
Project Structure: The project structure will look like the following:
Steps to run the application: Run the below command to see the output
ng serve --save
Example 1: In the below code, we will be using the above properties to demonstrate the use of the Angular PrimeNG Form MultiSelect Custom Content Component using pTemplate=”item” and a custom ng-template as selectedItems.
<h4>Angular PrimeNG Form MultiSelect Custom Content Component.</h4>
Please Login to comment...