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 know how to use the Dropdown component in Angular ngx Bootstrap. We will also learn about the various properties, events, methods & styling along with their syntaxes that will be used in the code example.
Dropdown component: It is used to make to choose the objects from the given list of items.
Properties:
- options: It is an array object representing select items to display as the available options. It is of array data type, the default value is null.
- optionLabel: It is used to give the name to a label of an option. It is of string data type, the default value is the label.
- optionValue: It is used to give the name to a value of an option, defaults to the option itself when not defined. It is of string data type, the default value is value.
- optionGroupLabel: It is used to give a name to a label in the option group. It is of string data type, the default value is the label.
- optionGroupChildren: It is used to give a name to the options field in the option group. It is of string data type, the default value is item.
- name: It is used to set the name of the input element. It is of string data type, the default value is null.
- scrollHeight: It is used to set the height of the viewport in pixels, a scrollbar is defined if the height of the list exceeds this value. It is of string data type, the default value is 200px.
- style: It is used to set an inline style of the element. It is of string data type, the default value is null.
- styleClass: It is used to set the style class of the element. It is of string data type, the default value is null.
- filter: It is used to display an input field to filter the items on keyup. It is of boolean data type, the default value is false.
- filterValue: It is a filter displayed with this value. It is of string data type, the default value is null.
- filterBy: It decides which field or fields (comma separated) to search against. It is of string data type, the default value is null.
- filterMatchMode: It is used to define how the items are filtered. It is of string data type, the default value is contains.
- filterPlaceholder: It is used to set the placeholder text to show when filter input is empty. It is of string data type, the default value is null.
- filterLocale: It is used to set the locale to use in filtering. The default locale is the host environment’s current locale. It is of string data type, the default value is undefined.
- required: It specifies that an input field must be filled out before submitting the form. It is of the boolean data type, the default value is false.
- disabled: It specifies that the component should be disabled. It is of the boolean data type, the default value is false.
- readonly: It specifies that the component cannot be edited. It is of the boolean data type, the default value is false.
- emptyMessage: It is used to set the text to display when there is no data. It is of string data type.
- emptyFilterMessage: It is used to set the text to display when filtering does not return any results. It is of string data type.
- ariaLabelledBy: It is the ariaLabelledBy property that establishes relationships between the component and label(s) where its value should be one or more element IDs. It is of string data type, the default value is null.
- editable: It is used to specify the custom value instead of predefined options that can be entered using the editable input field. It is of the boolean data type, the default value is false.
- maxlength: It is used to specify the maximum number of characters allowed in the editable input field, It is of number datatype, the default value is null.
- appendTo: This property takes the ID of the element on which overlay is appended to. It accepts any data type, the default value is null.
- tabindex: It is used to set the index of the element in tabbing order. It is of number datatype, the default value is null.
- inputId: It is an ID identifier of the underlying input element. It is of string data type, the default value is null.
- dataKey: It is a property to uniquely identify a value in options. It is of string data type, the default value is null.
- autofocus: it specifies that the component should automatically focus on load. It is of the boolean data type, the default value is false.
- autofocusFilter: It is used to apply focus to the filter element when the overlay is shown. It is of the boolean data type, the default value is false.
- resetFilterOnHide: It is used to clear the filter value when hiding the dropdown. It is of the boolean data type, the default value is false.
- dropdownIcon: It is used to set the icon class of the dropdown icon. It is of string data type, the default value is pi pi-chevron-down.
- emptyFilterMessage: It is used to set the text to display when filtering does not return any results. It is of string data type.
- autoDisplayFirst: It is used to specify whether to display the first item as the label if no placeholder is defined and the value is null. It is of the boolean data type, the default value is true.
- group: It is used to specify whether to display options as grouped when nested options are provided. It is of the boolean data type, the default value is false.
- showClear: It is used to show the clear icon which is displayed to clear the value. It is of boolean data type, the default value is false.
- baseZIndex: It is used to set the base zIndex value to use in the layering. It is of number datatype, the default value is 0.
- autoZIndex: It is used to specify whether to automatically manage the layering. It is of the boolean data type, the default value is true.
- showTransitionOptions: It is used to set the Transition options of the show animation. It is of string data type, the default value is .12s cubic-bezier(0, 0, 0.2, 1).
- hideTransitionOptions: It is used to set the transition options of the hide animation. It is of string data type, the default value is .1s linear.
- ariaFilterLabel: It is used to define a string that labels the filter input. It is of string data type, the default value is null.
- tooltip: It is used to show the advisory information to display in a tooltip on hover. It accepts any data type, the default value is null.
- tooltipStyleClass: It is used to set the Style class of the tooltip. It is of string data type, the default value is null.
- tooltipPosition: It is used to set the position of the tooltip, the valid values are right, left, top and bottom. It is of string data type, the default value is top.
- tooltipPositionStyle: It is used to set the type of CSS position. It is of string data type, the default value is absolute.
Events:
- onClick: It is a callback that is fired when the component is clicked.
- onChange: It is a callback that is fired when the value of the dropdown changes.
- onFilter: It is a callback that is fired when data is filtered.
- onFocus: It is a callback that is fired when dropdown gets focus.
- onBlur: It is a callback that is fired when dropdown loses focus.
- onShow: It is a callback that is fired when the dropdown overlay gets visible.
- onHide: It is a callback that is fired when the dropdown overlay gets hidden.
Methods:
- resetFilter: It is used to resets the filter.
- focus: It is used to apply the focus.
- show: It is used to displays the panel.
- hide: It is used to hides the panel.
Styling:
- p-dropdown: It is a styling container element.
- p-dropdown-clearable: It is a styling container element when showClear is on.
- p-dropdown-label: It is a styling element to display the label of the selected option.
- p-dropdown-trigger: It is a styling icon element.
- p-dropdown-panel: It is a styling panel element.
- p-dropdown-items-wrapper: It is a styling wrapper element of the items list.
- p-dropdown-items: It is a styling list element of items.
- p-dropdown-item: It is a list item.
- p-dropdown-filter-container: It is a styling container of filter input.
- p-dropdown-filter: It is a styling filter element.
- p-dropdown-open: It is a styling container element when the overlay is visible.
Creating Angular application & module installation:
- Step 1: Create an Angular application using the following command.
ng new appname
- Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
- Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: It will look like the following:
Example 1: This is the basic example that shows how to use the dropdown component.
app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG dropdowm component</h5>
<p-dropdown
[options]="lang"
placeholder="Select a Language"
optionLabel="name"
[showClear]="true">
</p-dropdown>
|
app.component.ts
import { Component } from "@angular/core";
@Component({ selector: "my-app",
templateUrl: "./app.component.html"
}) export class AppComponent { lang = [
{ name: "HTML" },
{ name: "ReactJS" },
{ name: "Angular" },
{ name: "Bootstrap" },
{ name: "PrimeNG" },
];
} |
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DropdownModule } from "primeng/dropdown";
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule {} |
Output:
Example 2: In this example, we will know how to use editable property in the dropdown component.
app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG dropdowm component</h5>
<p-dropdown
[options]='[{name: "Editable1"}, {name: "Editable2"},
{name: "Editable3"}, {name: "Editable4"},
{name: "Editable5"}]'
editable="true"
placeholder="Select a Language"
optionLabel="name"
[showClear]="true">
</p-dropdown>
|
app.component.ts
import { Component } from "@angular/core";
@Component({ selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
}) export class AppComponent { } |
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DropdownModule } from "primeng/dropdown";
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule {} |
Output:
Reference: https://primeng.org/dropdown