Open In App

Angular PrimeNG Focus Trap Dropdown

Improve
Improve
Like Article
Like
Save
Share
Report

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 Focus Trap Dropdown in Angular PrimeNG. We will also learn about the various properties and their syntaxes used in the code example.

Angular PrimeNG Focus Trap is used to maintain focus on certain DOM elements while we tab with the tab key. Focus Trap dropdown focuses on the element when any value is selected from the dropdown menu.

Angular PrimeNG Focus Trap Dropdown properties:

  • options: It specifies the variable name for an array of objects having key as optionLabel and value as dropdown item names.
  • optionLabel: It specifies the key name for the array of objects that is used to store dropdown items as the value. 
  • showClear: It specifies the cross icon to unselect the dropdown value.

Syntax:

<p-dropdown
    [options]="..."
    placeholder="..."
    optionLabel="..."
    [showClear]="true">
</p-dropdown>

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:

 

To run the above file run the below command:

ng serve --save

Example 1: Below is the code that illustrates the use of Angular PrimeNG Focus Trap Dropdown.

app.component.html




<div pFocusTrap class="card">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>Angular PrimeNG Focus Trap Dropdown</h5>
    
  <p-dropdown
    [options]="courses"
    placeholder="Select a subject"
    optionLabel="courseName"
    [showClear]="false">
  </p-dropdown>
</div>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {
    courses = [
      { courseName: 'DSA - Self Paced' },
      { courseName: 'Test Series' },
      { courseName: 'Interview Preparation' },
      { courseName: 'C++ STL' },
      { courseName: 'System Design' },
    ];
}


app.module.ts




import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownModule } from 'primeng/dropdown';
  
@NgModule({
    imports: [BrowserAnimationsModule, DropdownModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule {}


Output:

 

Example 2: Below is another code that illustrates the use of Angular PrimeNG Focus Trap Dropdown with some other property values and dropdown items.

app.component.html




<div pFocusTrap class="card">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>Angular PrimeNG Focus Trap Dropdown</h5>
    
  <p-dropdown
    [options]="subjects"
    placeholder="Select a subject"
    optionLabel="name"
    [showClear]="true">
  </p-dropdown>
</div>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    subjects = [
      { name: 'Data Structure' },
      { name: 'OOPs' },
      { name: 'Operating System' },
      { name: 'DBMS' },
      { name: 'Computer Networks' },
    ];
}


app.module.ts




import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownModule } from 'primeng/dropdown';
  
@NgModule({
    imports: [BrowserAnimationsModule, DropdownModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule {}


Output:

 

Reference: https://primefaces.org/primeng/focustrap



Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads