Cómo utilizar componentes PrimeNG en Angular

Introducción

PrimeNG de PrimeFaces es una biblioteca de componentes de interfaz de usuario alternativos. Ofrece una selección de temas y componentes de interfaz de usuario prediseñados para presentación de datos, entradas de formularios, menús, gráficos, superposiciones y más.

En este artículo, configurará PrimeNG en un proyecto Angular 4+ y explorará algunos de los componentes principales.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Este tutorial también asumirá que lo has @angular/cliinstalado globalmente.

Este tutorial fue verificado con Node v16.6.1, npmv7.20.3, @angular/corev12.2.0, primengv12.0.1 y primeiconsv4.1.0.

Configuración del proyecto

Puedes usarlo @angular/clipara crear un nuevo proyecto Angular.

En su ventana de terminal, utilice el siguiente comando:

ng new AngularPrimeNGExample --style=css --routing=false --skip-tests

Esto configurará un nuevo proyecto Angular con estilos establecidos en “CSS” (a diferencia de “Sass”, Less” o “Stylus”), sin enrutamiento y sin omitir pruebas.

Navegue hasta el directorio del proyecto recién creado:

cd AngularPrimeNGExample

Para comenzar, instale los paquetes necesarios: primengy primeiconsen su proyecto:

npm install primeng@12.0.1 primeicons@4.1.0

En este punto, tienes un nuevo proyecto Angular con primengy primeicons.

Cómo agregar estilos PrimeNG

A continuación, agregue los archivos CSS necesarios como parte de los estilos cargados por Angular CLI:

angular.json (parcial)

..."styles": [  "styles.css",  "node_modules/font-awesome/css/font-awesome.min.css",  "node_modules/primeng/resources/primeng.min.css",  "node_modules/primeng/resources/themes/saga-blue/theme.css"],...

**Nota: Deberá reiniciar su servidor local después de agregar el angular.jsonarchivo de configuración.

Aquí usamos el saga-bluetema, pero puedes elegir entre los temas disponibles como nova, rheao fluent-light.

Importación de componentes PrimeNG

Ahora configuremos nuestro módulo de aplicación para incluir los componentes de UI que queremos:

src/app/app.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { FormsModule } from '@angular/forms';import { AccordionModule } from 'primeng/accordion';import { PanelModule } from 'primeng/panel';import { ButtonModule } from 'primeng/button';import { RadioButtonModule } from 'primeng/radioButton';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    BrowserAnimationsModule,    FormsModule,    AccordionModule,    PanelModule,    ButtonModule,    RadioButtonModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Observe cómo también importamos Angular BrowserAnimationsModuley FormsModule. El módulo de animación es requerido por los componentes de PrimeNG y el módulo de formulario será necesario para usar componentes de entrada de formulario como el componente de botón de opción.

En este punto, tienes un nuevo proyecto Angular con soporte para AccordionModule, PanelModule, ButtonModule, y RadioButtonModule.

Creación de una aplicación con componentes PrimeNG

A continuación se muestra un ejemplo que utiliza los componentes accordion, panel, radio buttony de PrimeNG button.

Agregar pizzaSelection:

src/app/app.component.ts

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

Luego agrega p-accordion, p-accordionTab, p-radioButton, p-panely pButton:

src/aplicación/aplicación.componente.html

p-accordion  p-accordionTab header="Salads"    Salads...  /p-accordionTab  p-accordionTab header="Pasta"    Pasta...  /p-accordionTab  p-accordionTab header="Pizza" [selected]="true"    div      p-radioButton        label="Double cheese"        name="pizza"        value="double-cheese"        [(ngModel)]="pizzaSelection"      /p-radioButton    /div    div      p-radioButton        label="Anchovy"        name="pizza"        value="anchovy"        [(ngModel)]="pizzaSelection"      /p-radioButton    /div    div      p-radioButton        label="Meatlover's"        name="pizza"        value="meat-lover"        [(ngModel)]="pizzaSelection"      /p-radioButton    /div  /p-accordionTab/p-accordionp-panel header="Extras" *ngIf="pizzaSelection  pizzaSelection.length"  Would you like extra cheese on your pizza?  button pButton type="button" label="Ok, yeah!"/button/p-panel

Observe cómo los componentes utilizan el p-prefijo.

Guarde los cambios en su archivo y sirva la aplicación.

Si selecciona una pizza, aparecerá el panel Extras y solicitará a los usuarios que agreguen queso adicional.

Conclusión

En este artículo, configurará PrimeNG en un proyecto Angular 4+ y explorará algunos de los componentes principales.

Continúe su aprendizaje consultando la documentación oficial para obtener una muestra y documentación de todos los componentes disponibles.

Explore bibliotecas de componentes de UI alternativas con Angular Material 2 .