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:
- 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" >w3wiki</ 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" >w3wiki</ 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
Contact Us