Angular PrimeNG Focus Trap Float Label

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 Float Label in Angular PrimeNG.

The Focus Trap is used to maintain focus on certain DOM elements while we tab with the tab key. Focus Trap Float Label is used to float the label text using the p-float-label class when the input element is accessed either by tab key or by clicking on it.

Angular PrimeNG Focus Trap Float Label Classes:

• p-float-label: This class is used to float the input label when focusing on a certain DOM element while tabbing.

Angular PrimeNG Focus Trap Float Label 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 Focus Trap Float Label in Angular PrimeNG.

app.component.html

<div pFocusTrap class="card">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>Angular PrimeNG Focus Trap Float Label</h5>
  <span class="p-float-label">
    <input id="float-input"
           type="text"
            size="30" pInputText />
    <label for="float-input">
        This is floating input field
    </label>
  </span>
</div>

app.component.ts

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

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

app.module.ts

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

import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { InputTextModule } from 'primeng/inputtext';
import { EditorModule } from 'primeng/editor';
import {FocusTrapModule} from 'primeng/focustrap';

@NgModule({
    imports: [
    BrowserModule,
    BrowserAnimationsModule,
    InputTextModule,
    EditorModule,
    FocusTrapModule,
    HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}

Output:

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

app.component.html

<div pFocusTrap class="card">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Focus Trap Float Label</h5>
    <div class="p-float-label col-4">
        <input id="float-input1"
               type="text"
               size="25"
               pInputText class="p-mt-2" />
        <label for="float-input1">
            It will get floated when clicked.
        </label>
    </div>
    <div class="p-float-label col-4">
        <input id="float-input2"
               type="text"
               size="25"
               pInputText class="p-mt-2" />
        <label for="float-input2">
            It will get floated when clicked.
        </label>
    </div>
    <div class="p-float-label col-4">
        <input id="float-input3"
               type="text"
               size="25"
               pInputText class="p-mt-2" />
        <label for="float-input3">
            It will get floated when clicked.
        </label>
    </div>
</div>

app.component.ts

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

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

app.module.ts

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

import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { InputTextModule } from 'primeng/inputtext';
import { EditorModule } from 'primeng/editor';
import {FocusTrapModule} from 'primeng/focustrap';

@NgModule({
    imports: [
    BrowserModule,
    BrowserAnimationsModule,
    InputTextModule,
    EditorModule,
    FocusTrapModule,
    HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}

Output:

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