Angular PrimeNG Form Dropdown Properties Component

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. This article will show us how to use the Form Dropdown Properties Component in Angular PrimeNG.

The Properties Component is used to provide different properties to modify the dropdown.

Properties Used:

• options: This property is used to define the array of objects to display as the available options.
• optionLabel: This property is used to define the name of the label field of an option.
• optionValue: This property is used to define the name of the value field of an option.
• optionDisabled: This property is used to define the name of the disabled field of an option.
• optionGroupLabel: This property is used to define the name of the label field of an option group.
• optionGroupChildren: This property is used to define the name of the options field of an option group.
• name: This property is used to define the name of the input element.
• scrollHeight: This property is used to define the height of the viewport in pixels, a scrollbar is defined if the height of the list exceeds this value.
• style: This property is used to define the inline style of the element.
• panelStyle: This property is used to define the inline style of the overlay panel element.
• styleClass: This property is used to define the style class of the element.
• panelStyleClass: This property is used to define the style class of the overlay panel element.
• filter: This property is used to define the displays as an input field to filter the items on keyup.
• filterValue: This property is used to define the filter displays with this value.
• filterBy: This property is used to define the decide which field or fields (comma separated) to search against.
• filterMatchMode: This property is used to define the how the items are filtered, valid values are “contains” (default) “startsWith”, “endsWith”, “equals”, “notEquals”, “in”, “lt”, “lte”, “gt” and “gte”.
• filterPlaceholder: This property is used to define the placeholder text to show when the filter input is empty.
• filterLocale: This property is used to define the locale to use in filtering and the default locale is the host environment’s current locale.
• required: This property is used to define the specifies that an input field must be filled out before submitting the form.
• disabled: This property is used to define the specification that the component should be disabled.
• readonly: This property is used to define the specification that the component cannot be edited.
• emptyMessage: This property is used to define the text to display when there is no data.
• emptyFilterMessage: This property is used to define the text to display when filtering does not return any results and defaults to the global value in the i18n translation configuration.
• ariaLabelledBy: This property is used to establish relationships between the component and label(s) where its value should be one or more element IDs.
• editable: This property is used to define the custom value instead of predefined options that can be entered using the editable input field.
• maxlength: This property is used to define the maximum number of characters allowed in the editable input field.
• appendTo: This property is used to define the target element to attach the overlay, valid values are “body” or a local ng-template variable of another element.
• tabindex: This property is used to define the index of the element in tabbing order.
• placeholder: This property is used to define the default text to display when no option is selected.
• inputId: This property is used to define the identifier of the accessible input element.
• dataKey: This property is used to define the property to uniquely identify a value in options.
• autofocus: This property is used to specify that the component should automatically get focused on load.
• autofocusFilter: This property is used to define the filter element when the overlay is shown.
• resetFilterOnHide: This property is used to clear the filter value when hiding the dropdown.
• dropdownIcon: This property is used to define the icon class of the dropdown icon.
• emptyFilterMessage: This property is used to display when filtering does not return any results.
• autoDisplayFirst: This property is used to define to display of the first item as the label if no placeholder is defined and the value is null.
• group: This property is used to display options as grouped when nested options are provided.
• showClear: This property is used to display a clear icon to clear the value.
• baseZIndex: This property is used to define the base zIndex value to use in layering.
• autoZIndex: This property is used to manage to layer.
• showTransitionOptions: This property is used to define the transition options of the show animation.
• hideTransitionOptions: This property is used to define the transition options of the hide animation.
• ariaFilterLabel: This property is used to define the string that labels the filter input.
• ariaLabel: This property is used to define the string that autocompletes attributes to the current element.
• tooltip: This property is used to define the advisory information to display in a tooltip on hover.
• tooltipStyleClass: This property is used to define the style class of the tooltip.
• tooltipPosition: This property is used to define the position of the tooltip, valid values are right, left, top, and bottom.
• tooltipPositionStyle: This property is used to define the type of CSS position.
• virtualScroll: This property is used to define whether the data should be loaded on demand during the scroll.
• virtualScrollItemSize: This property is used to define the height of an item in the list for VirtualScrolling.
• virtualScrollOptions: This property is used to define whether to use the scroller feature. 
• lazy: This property is used to define if data is loaded and interacted with in a lazy manner.

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: 

Example1: In the below code, we will be using the above syntax to demonstrate the use of the Form Dropdown Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Dropdown Properties Component</h4>

    <h5>Single</h5>
    <p-dropdown
        [options]="cities"
        placeholder="Select a City"
        optionLabel="name"
        [showClear]="true">
      </p-dropdown>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';

interface City {
    name: string,
    code: string
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    cities: City[];

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }
}

• app.module.ts

Javascript

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 { }

• app.component.scss

CSS

:host ::ng-deep .p-dropdown {
    width: 14rem;
}

Output:

Example2: Below is another example code, that demonstrates the use of the Form Dropdown Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Dropdown Properties Component</h4>

    <h5>Group</h5>
    <p-dropdown
        [options]="gfgGropedCities"
        placeholder="Select a City"
        [group]="true">
        <ng-template let-group pTemplate="group">
            <div class="p-d-flex p-ai-center">
                <span>{{ group.label }}</span>
            </div>
        </ng-template>
    </p-dropdown>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import {SelectItemGroup} from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    gfgGropedCities: SelectItemGroup[];

    constructor() {

        this.gfgGropedCities = [
            {
                label: 'Germany', value: 'de',
                items: [
                    {label: 'Berlin', value: 'Berlin'},
                    {label: 'Frankfurt', value: 'Frankfurt'},
                    {label: 'Hamburg', value: 'Hamburg'},
                    {label: 'Munich', value: 'Munich'}
                ]
            },
            {
                label: 'USA', value: 'us',
                items: [
                    {label: 'Chicago', value: 'Chicago'},
                    {label: 'Los Angeles', value: 'Los Angeles'},
                    {label: 'New York', value: 'New York'},
                    {label: 'San Francisco', value: 'San Francisco'}
                ]
            },
            {
                label: 'Japan', value: 'jp',
                items: [
                    {label: 'Kyoto', value: 'Kyoto'},
                    {label: 'Osaka', value: 'Osaka'},
                    {label: 'Tokyo', value: 'Tokyo'},
                    {label: 'Yokohama', value: 'Yokohama'}
                ]
            }
        ];
    }
}

• app.module.ts

Javascript

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 {}

• app.component.scss

CSS

:host ::ng-deep .p-dropdown {
    width: 14rem;
}

Output:

Reference: https://www.primefaces.org/primeng/dropdown