Choosing items with single and MultiSelect components

Dropdown provides a way to select an item from a collection of available options. To list out all possible options, we should use the SelectItem interface that defines label-value properties, and this list will bind to the options attribute. The two-way binding for selected items is defined through the model property. Let's display a list of countries in a dropdown for user input. A basic example of a dropdown with the list of options would be as follows:

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"
[styleClass]="dropdown-width"
placeholder="Select a Country">
</
p-dropdown>

The dropdown will be displayed with options as shown in the following screenshot:

The Dropdown component provides three event callbacks, such as onChange, onFocus, and onBlur. When the dropdown value changes, it gets the focus and looses the focus, respectively. There is a provision to edit the input directly like any other input components using the editable property (that is, editable="true").

The width and height of the dropdown's viewport will be controlled through the autoWidth and scrollHeight properties. By default, the width of the dropdown is calculated based on the options width. Whereas, the scroll height is controlled through the scrollHeight option in pixels, the scrollbar is defined if the height of the list exceeds this value.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.96.105