Angular PrimeNG Form Dropdown Methods Component

Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will see Angular PrimeNG Form Dropdown Methods Component.

The Dropdown Component is used to provide users with a list of options out of which users can select any one option. It is generally used in implementing filters, asking for the country of the user, etc. It is used to make to choose the objects from the given list of items. The Dropdown Methods are used to reset filters, apply focus, display and hide the panel in the Form Dropdown Component.

Angular PrimeNG Form Dropdown Methods:

• resetFilter: This method is used to resets filtering in the Form Dropdown Component.
• focus: This method is used to apply focus in the Form Dropdown Component.
• show: This method is used to display the panel in the Form Dropdown Component.
• hide: This method is used to hide the panel in the Form Dropdown Component.

Angular PrimeNG Form Dropdown Method Properties:

• options: This property accepts an array of objects to display as dropdown options.
• placeholder: This property is used to set the placeholder for the dropdown field.
• optionLabel: This property is the name of the label field of an option.

Syntax:

// app.component.html
<p-dropdown 
  styleClass="dropdown1"
  [options]="sports" 
  [(ngModel)]="chosenSport" 
  optionLabel="name">
  
  <ng-template pTemplate="items">
      ...
  </ng-template>
</p-dropdown>

// app.component.ts
public Method() {
    //statement 
    this.dropdown.methodName();
}

Creating Angular application and Installing the Modules:

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: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After completing the above steps, the project structure will look like the following:

Project Structure

• To run the above file, run the below command:

ng serve --open

Example 1: In the below code example, we will make use of the resetFilter method of the Form Dropdown Component.

• app.component.html

HTML

<div style="text-align:center;">
    <div>
        <h2 style="color: green">GeeksforGeeks</h2>
        <h4>
            Angular PrimeNG Form
            Dropdown Methods Component
        </h4>

        <p-dropdown #dd [(ngModel)]="selectedCountry"
                        placeholder="Select Your Country"
                        optionLabel="name"
                        [showClear]="true"
                        [filter]="true"
                        [options]="countries">
        </p-dropdown>
        <p-button label="Reset"
                  (onClick)="ddresetFilter()">
        </p-button>
    </div>
</div>

• app.component.css

CSS

:host ::ng-deep .p-dropdown {
    width: 250px;
    margin-right: 20px;
}

:host ::ng-deep .p-dropdown-item {
    font-weight: bold;
}

• app.component.ts

Javascript

import { Component, ViewChild } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';

interface Country {
    name: string;
    code: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    countries: Country[] = [];
    selectedCountry?: Country;
    @ViewChild('dd') dropdown!: Dropdown;

    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "+91"
            },
            {
                name: "Nepal",
                code: "+977"
            },
            {
                name: "Bhutan",
                code: "+975"
            },
            {
                name: "Russia",
                code: "+7"
            },
            {
                name: "Bangladesh",
                code: "+880"
            },
            {
                name: "Canada",
                code: "+1"
            }
        ];
    }

    public ddresetFilter() {
        this.dropdown.resetFilter();
    }
}

• 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';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DropdownModule,
        FormsModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In the below code example, we will make use of the show and hide methods of the Form Dropdown Component.

• app.component.html

HTML

<div style="text-align:center;">
    <div>
        <h2 style="color: green">
              GeeksforGeeks
          </h2>
        <h4>
            Angular PrimeNG Form
            Dropdown Methods Component
        </h4>

        <p-dropdown #dd [(ngModel)]="selectedCountry"
                        placeholder="Select Your Country"
                        optionLabel="name"
                        [showClear]="true"
                        [options]="countries">
        </p-dropdown>

        <p-button label="Show"
                  (onClick)="show()">
        </p-button>
        <p-button label="Hide"
                  (onClick)="hide()">
        </p-button>
    </div>
</div>

• app.component.css

CSS

:host ::ng-deep .p-dropdown {
    width: 200px;
    margin-right: 10px;
}

:host ::ng-deep .p-dropdown-item {
    font-weight: bold;
}

:host ::ng-deep .p-button {
    margin-right: 10px;
}

• app.component.ts

Javascript

import { Component, ViewChild } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';

interface Country {
    name: string;
    code: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    countries: Country[] = [];
    selectedCountry?: Country;
    @ViewChild('dd') dropdown!: Dropdown;

    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "+91"
            },
            {
                name: "Nepal",
                code: "+977"
            },
            {
                name: "Bhutan",
                code: "+975"
            },
            {
                name: "Russia",
                code: "+7"
            },
            {
                name: "Bangladesh",
                code: "+880"
            },
            {
                name: "Canada",
                code: "+1"
            }
        ];
    }

    public hide() {
        this.dropdown.hide();
    }

    public show() {
        this.dropdown.show();
    }
}

• 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';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DropdownModule,
        FormsModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/dropdown