ANGULAR+PRIMENG 2023
En este post se va a enseñar como utilizar la librería de componentes PrimeNG. Esta librería ofrece una variedad de componentes como tablas, formularios y menús con un diseño atractivo y una funcionalidad mejorada.
Instalar dependencias
Primero necesitas ejecutar los comandos de instalación en tu proyecto. A parte de PrimeNG y PrimeIcons (Librería opcional) añadiremos también PrimeFlex que es una librería de estilos css muy parecida a Bootstrap y compatible con PrimeNG, la razón para añadir esta librería es que Bootstrap sobrescribe los estilo de algunos componentes de PrimeNG obligándonos a retocarlos manualmente en muchas ocasiones.
- npm i –save primeng
- npm i –save primeicons
- npm i –save primeflex
Tras instalar los módulos correspondientes hay que agregar los estilos css de alguna de las siguientes maneras:
- angular.json: Se pueden añadir a en el array de strings «styles».
- styles.css: Es la opción más recomendable ya que unifica todos los estilos en un mismo fichero en vez de añadir una gran cantidad de rutas en angular.json.
Utilizar un componente
Tras añadir todas las dependencias ya podemos añadir un componente e implementarlo siguiendo los ejemplos de PrimeNG, cada componente suele estar compuesto de una etiqueta con atributos que recibe del fichero ts o de forma estática. Por ejemplo para añadir y usar el componente Checkbox se necesita primero importar su modulo en los imports de app.module.
import { CheckboxModule } from ‘primeng/checkbox’;
Tras importarlo ya se puede utilizar su etiqueta como aparece en los ejemplos de primeng.
Modificado el html y el ts ya se puede ver el componente.
Modificar el estilo de un componente/asignarle un estilo
Para modificar una clase de estilo de algún componente o crear tu propio estilo para un componente necesitas añadir el prefijo :host ::ng-deep antes de cada clase de la siguiente manera:
:host ::ng-deep .p-button{}
:host ::ng-deep .miclase{}
Para añadir tu clase a un componente tienes que usar el atributo styleClass=»miclase».
Problemas más frecuentes
En algunos casos puede ocurrir que has importado todo el código html/ts del ejemplo y aun así no te funcione el componente, hay tres posibles causas para este problema:
- Imports extra: Es posible que ese componente utilice algún módulo de angular para funcionar, el más frecuente es BrowserAnimationsModule.
- Dependencia de otro componente: Existen componentes que a su vez utilizan otros componentes y necesitas importar esos componentes para que funcionen.
- Inyección de servicios: Por último hay componentes que necesitan la inyección de algún servicio en app.module.
Para identificar tu problema puedes utilizar las herramientas que ofrece PrimeNG para ver un ejemplo online con código y ejecución que puedes modificar.
Autor/a: Héctor Mauricio Almaraz Rocha
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar Tech
Año académico: 2023-2024
Recursos utilizados: GitHub+ PrimeNG + PrimeIcons + PrimeFlex
Linkedin