Componente angular PrimeNG Inplace

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 Inplace en Angular PrimeNG. También aprenderemos sobre las propiedades, eventos, métodos y estilo junto con sus sintaxis que se usarán en el código. 

Componente en lugar : se utiliza para editar y mostrar el contenido en lugar de otros al mismo tiempo y representar la salida real mientras se hace clic en el botón para mostrar.

Propiedades:

• active : Se utiliza para especificar si el contenido se muestra o no. Es de tipo de datos booleano y el valor predeterminado es falso.
• disabled : Especifica que el elemento debe estar deshabilitado. Es del tipo de dato booleano, el valor por defecto es false.
• cerrable : muestra un botón para volver al modo de visualización. Es del tipo de dato booleano, el valor por defecto es false.
• preventClick : especifica si el componente se puede controlar mediante programación completa con las funciones activar() y desactivar(). Es del tipo de dato booleano, el valor por defecto es false.
• style : Establece un estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass : Es la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• closeIcon : Es el ícono de cierre, es de tipo de datos de string, el valor predeterminado es pi pi-times.

Eventos:

• onActivate: es una devolución de llamada que se activa cuando se activa el contenido.
• onDeactivate: es una devolución de llamada que se activa cuando se desactiva el contenido

Métodos:

• activar: Se utiliza para activar el contenido.
• deactivate: Se utiliza para desactivar el contenido.

Estilo:

• p-inplace: Es el elemento Contenedor
• p-inplace-display: Es el contenedor Display
• p-inplace-content: Es el contenedor de Contenido

Creación de aplicaciones angulares e instalación de módulos:

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: Tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo implementar la propiedad cerrable en el componente Inplace.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Inplace Component</h5>
<p-inplace closable="closable">
  <ng-template pTemplate="display"> Click to Edit </ng-template>
  <ng-template pTemplate="content">
    <input type="text" value="GeeksforGeeks" pInputText />
  </ng-template>
</p-inplace>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

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

Producción:

Ejemplo 2: En este ejemplo, estamos creando un botón dentro del Componente Inplace.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Inplace Component</h5>
<p-inplace>
  <ng-template pTemplate="display"> 
    Click Here 
  </ng-template>
  <ng-template pTemplate="content">
    <p-button>GfG</p-button>
  </ng-template>
</p-inplace>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

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

Producción:

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