> For the complete documentation index, see [llms.txt](https://jorgeucano.gitbook.io/entendiendo-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jorgeucano.gitbook.io/entendiendo-angular/capitulo-13-ui-angularmaterial-primeng/132-primeng.md).
# 13.2 - PrimeNG
vamos a bajar primeNG
npm install primeng — save
Vamos a agregar los css de primeng al CLI
Agregamos
> “../node\_modules/primeng/resources/themes/omega/theme.css”, “../node\_modules/font-awesome/css/font-awesome.min.css”, “../node\_modules/primeng/resources/primeng.min.css”
## Ahora si podemos empezar a programar
Lo primero que vamos a hacer es entrar a la web de primeng para ver que vamos a utilizar
[**PrimeNG**\
\_Edit description\_www.primefaces.org](http://www.primefaces.org/primeng/#/)
Supongamos que queremos agregar un boton ( esto pasa con casi todos los componentes de primeng por lo tanto es importante)
Para utilizarlo no basta con importarlo y usar los css.. si no que vamos a tener que importar los modulos que queramos utilizar…
Si señor … app.module.ts :D
y luego lo podemos utilizar directamente en nuestro html
app.component.html
Y ya lo tenemos funcionado… pero si vemos un poco el html que ingresamos el texto de adentro del boton esta en el atributo label…
Exacto lo que pensabas… si leiste el post o miraste algo de angularmaterial, en realidad lo que estamos usando son componentes custom de primeng.. por eso tuvimos que importar el modulo y luego poder utilizarlo…
> Algo sumamente importante que a veces no lo vemos en la documentación es el tema de los import de los modules… todos los módulos de primeng es el nombre+module …y se deben importar para poder utilizar… capaz que es algo que le falta a la documentación y a veces uno no entiende porque no le funciona nada…
Juguemos un poco mas ..
Tenemos unos cuantas series de componentes para poder utilizar y no volvernos tan locos con algunas cosas….
En nuestro caso vamos a utilizar algunos para ver su buen funcionamiento… mas que nada vamos a ver:
El sistema grilla (cosa muy importante)
Los inputs para los formularios
Una “tabla” para poder mostrar datos filtrar paginas y demas..
## Grillas
Las grillas son realmente algo fácil de utilizar… Solo tenemos que indicar que vamos a tener un contenedor de grillas y después tenemos el modelo de 12 columnas
Como pueden ver en el código… el ui-g indica lo que seria el “iniciador” de la grilla… y luego los ui-{TAMAÑO}-{NUMERO} indica lo que van a ocupar en cada tamaño de la pantalla… el resto del css es para el ejemplo.
## Inputs
Tenemos una gran cantidad de componentes para inputs… los cuales están muy buenos para utilizar… por una cuestión de muestra … vamos a utilizar el password y el calendar…
### Password
Como bien les comente al principio del post, vamos a tener que importar los modulos que vayamos a utilizar… por lo tanto
Y luego lo podemos utilizar tranquilamente!
No le puse el type password para que se pueda observar con que voy llenando y como muestra la “fuerza” del password.
Y por ultimo algo que es muy interesante es el manejo de las tablas responsive, con filtros y otras cosas…
Para eso voy a generar una json con datos ..
Y vamos a necesitar importar las tablas en nuestros modulos, tanto en el app.module.ts como en el componente
y ahora si la podemos empezar a utilizar
y esta parte de la tabla queda así
Ahora vamos a ponerle complejidad… por ahora lo único que hace es iterar el objeto y ponerlo …
Agregando una serie de inputs a nuestra tabla vamos a tener muchos beneficios…
> \[rows]=”10" \[paginator]=”true” \[pageLinks]=”3" \[rowsPerPageOptions]=”\[5,10,20]”
Con este código simplemente en nuestro html vamos a lograr esto…
le indicamos la cantidad de rows inicial, que vamos a paginar, cuantos “paginas” queremos ver y luego cuantas opciones de rows por pagina queremos y ya funciona.
Otra cosa muy importante en esta iteración de datos y tablas, es que sea responsive… y tenemos la solución para esto…
> \[responsive]=”true” \[stacked]=”stacked”
Uno de los ejemplos de filtros es el “arranca con” y de ahi podemos ver que funciona a la perfección y super rápido… ahora que tuvimos que hacer… si agregar un par mas de inputs … el html quedo así …
Realmente una vez que uno se acostumbra a importar los modulos de la ui que necesita termina siendo facil de utilizar…. hasta comodo para muchas cosas..