Componente Angular PrimeNG FloatLabel

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente FloatLabel en angular PrimeNG.

El componente FloatLabel es la etiqueta flotante que se puede usar en el componente de entrada.

Creación de una aplicación angular e instalación del módulo:

  • Paso 1: Cree una aplicación Angular usando el siguiente comando.
    ng new appname
  • Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.
    cd appname
  • Paso 3: Instale PrimeNG en su directorio dado.
    npm install primeng --save
    npm install primeicons --save

Estructura del proyecto : Se verá como lo siguiente.

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente FloatLabel 

app.component.html

<h2>GeeksforGeeks</h2>
  
<p>PrimeNG FloatLabel component</p>
  
<div class="p-field p-col-12 p-md-4">
  <span class="p-float-label">
    <input type="text" pInputText />
    <label>InputText</label>
  </span>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from
    "@angular/platform-browser/animations";
import { HttpClientModule } from "@angular/common/http";
  
import { AppComponent } from "./app.component";
  
import { AutoCompleteModule } from "primeng/autocomplete";
import { InputTextModule } from "primeng/inputtext";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AutoCompleteModule,
    FormsModule,
    HttpClientModule,
    InputTextModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad disabled en el componente FloatLabel. 

app.component.html

<h2>GeeksforGeeks</h2>
  
<p>PrimeNG FloatLabel component</p>
  
<div class="p-field p-col-12 p-md-4">
  <span class="p-float-label">
    <input disabled="true" type="text" pInputText />
    <label>InputText</label>
  </span>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from 
    "@angular/platform-browser/animations";
import { HttpClientModule } from "@angular/common/http";
  
import { AppComponent } from "./app.component";
  
import { AutoCompleteModule } from "primeng/autocomplete";
import { InputTextModule } from "primeng/inputtext";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AutoCompleteModule,
    FormsModule,
    HttpClientModule,
    InputTextModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/floatlabel

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *