Angular PrimeNG es un marco de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que ayuda a crear una interfaz de usuario atractiva con una funcionalidad mejorada. Estos componentes se pueden utilizar para crear un gran estilo y se utilizan para crear sitios web receptivos con mucha facilidad. Hay diferentes funcionalidades que son compatibles con los diferentes componentes, como el efecto Ripple. Es una animación que es compatible con el componente de botón, que es opcional y está deshabilitado de forma predeterminada y se puede habilitar globalmente en el componente principal mediante la inyección de PrimeNGConfig . La animación se utiliza principalmente para mejorar la experiencia general del usuario con los diversos componentes.
PrimeNG facilita los diversos componentes, paneles, superposiciones, menús, gráficos, etc., lo que ayuda a crear una aplicación de una sola página , es decir, una aplicación web, que carga una sola página HTML y solo una parte de la página en lugar de la toda la página se actualiza con cada clic del ratón. Esto mejora la experiencia general del usuario, además de agregar las diferentes funciones para realizar la tarea específica, según los componentes utilizados.
En este artículo, conoceremos una descripción general, su sintaxis y procedimientos de instalación, además de comprender su implementación a través de los ejemplos.
Sintaxis de instalación:
npm install primeng --save
Pasos para instalar Angular PrimeNG: Antes de proceder a instalar Angular PrimeNG, debemos tener instalado Angular CLI en el sistema. Consulte el artículo Configuración de Angular CLI Angular Project para conocer el procedimiento de instalación detallado. Asegúrese de que Angular CLI & Node Package Manager esté instalado correctamente. Para verificar la versión instalada, ejecute los siguientes comandos:
- Para la versión de NodeJS:
node --version
- Para la versión NPM:
npm -V OR npm --version
- Para la versión CLI angular:
ng -V or ng --version
Después de completar la instalación de requisitos previos, ahora podemos instalar y crear el proyecto Angular PrimeNG en el sistema local mediante la interfaz de línea de comandos.
Pasos para crear la aplicación Angular PrimeNG:
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 al directorio de trabajo actual donde se acaba de crear la nueva aplicación, usando el siguiente comando:
cd appname
Paso 3: Instale PrimeNG en su directorio dado.
npm install primeng --save npm install primeicons --save
Estructura del proyecto: después de una instalación exitosa, se verá como la siguiente imagen:
Estructura del proyecto
Ejemplo: Este ejemplo ilustra la implementación de Angular PrimeNG.
app.component.html
<h2>GeeksforGeeks</h2> <h5>Angular PrimeNG Component</h5> <p-panelMenu [model]="gfg"></p-panelMenu>
app.component.ts
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: "Web Technology",
items: [
{
label: "HTML",
},
{
label: "CSS",
items: [
{
label: "Pure CSS",
},
{
label: "Bulma CSS",
},
{
label: "Foundation CSS",
},
{
label: "Semantic UI",
},
],
},
{
label: "Javascript",
items: [
{
label: "Angular",
},
{
label: "React",
},
{
label: "FabricJS",
},
{
label: "VueJS",
},
],
},
{
label: "PHP",
},
{
label: "Database Management System",
},
],
},
{
label: "Data Structures",
items: [
{
label: "Linked List",
items: [
{
label: "Singly Linked List",
},
{
label: "Doubly Linked List",
},
{
label: "Circular Linked List",
},
],
},
{
label: "Stack",
},
{
label: "Queue",
},
{
label: "Tree",
},
{
label: "Graph",
},
{
label: "Heap",
},
],
},
];
}
}
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 { PanelMenuModule } from 'primeng/panelmenu';
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
PanelMenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Producción:
Ejemplo 2: este ejemplo describe el componente de diálogo en Angular PrimeNG.
app.component.html
<h2>GeeksforGeeks</h2> <h5>Angular PrimeNG Example</h5> <p-button (click)="gfg()" label="Click Here"> </p-button> <p-dialog header="GeeksforGeeks" [(visible)]="geeks"> <p>A Computer Science portal for geeks. </p> </p-dialog>
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 { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.ripple = true;
}
geeks: boolean;
gfg() {
this.geeks = true;
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por bijaybhaskar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA