Angular PrimeNG Focus Trap Input

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 see how to use the Focus Trap Input in Angular PrimeNG.

The Focus Trap is used to maintain focus on certain DOM elements while we tab with the tab key. Focus Trap input focuses on the input element when it is accessed either by tab key or by clicking on it.

Angular PrimeNG Focus Trap Input properties:

• size: It defines the size of the input element.
• placeholder: It defines the text inside the input element.

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:

Project Structure

• Run the below command:

ng serve --save

Example 1: Below is the basic example that shows how to use the Angular PrimeNG Focus Trap Input.

app.component.html

<div pFocusTrap class="card">
<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Focus Trap Input</h5>

<input
    id="gfg"
    type="text"
    size="25"
    pInputText
    placeholder="Input field" />
</div>

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { InputTextModule } from "primeng/inputtext";
import { EditorModule } from "primeng/editor";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    InputTextModule,
    EditorModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: Below is another example that illustrates the use of Angular PrimeNG Focus Trap Input with 3 input elements that get focused while pressing the tab key.

app.component.html

<div pFocusTrap class="card">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Focus Trap Input</h5>
    <label for="gfg">
          Please enter your name below:
      </label>
    <input id="gfg"
           type="text"
           size="30" pInputText
           class="p-mt-2"
           placeholder="Input field" />
    <input id="gfg1"
           type="text"
           size="30" pInputText
           class="p-mt-2"
           placeholder="Input field" />
    <input id="gfg2"
           type="text"
           size="30" pInputText
           class="p-mt-2"
           placeholder="Input field" />
</div>

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { InputTextModule } from "primeng/inputtext";
import { EditorModule } from "primeng/editor";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    InputTextModule,
    EditorModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

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