Angular lanzó a finales del pasado año su última versión: Angular 5. Desde el equipo Mobile de Profile hemos creado una librería de componentes para ayudar a los programadores FrontEnd a ser más ágiles en el desarrollo de webs y apps.
Angular es un framework open source de desarrollo web y móvil para JavaScript. Fue creado por Google en 2016 con el objetivo de facilitar el desarrollo de aplicaciones SPA (Single Page Applications). Se trata de aplicaciones de una sola página en las que la navegación y la carga de información se lleva a cabo de manera dinámica y asíncrona, eliminando problemas de latencia y alcanzando así mayor velocidad.
Nuestra librería contiene componentes, directivas y pipes útiles y está lista para consumir con el gestor de paquetes npmjs. Está desarrollada para ser compatible con la compilación Ahead-of-Time (AOT). Para no crear grandes bundles es posible importar solo el módulo que se necesite.
Gracias a estos componentes web, podrás trabajar de manera más ágil en el desarrollo de tus aplicaciones, aprovechar recursos y mejorar la experiencia de usuario.
▶️ Instala la librería de componentes de Angular 5
Estos son los componentes, directivas y pipes que vas a encontrar:
PrInput
Añade iconos en los inputs para mejorar la experiencia del usuario. Puedes utilizar los Font Awesome Icons y los Material Design Icons.
PrTabPanel
Panel de tabs personalizable. Elige entre usar las tabs por defecto o pasar por un input una template de referencia.
PrModal
Modal configurable y personalizable. Viene con una directiva estructural para abrirla.
PrMask
Esta directiva te permite definir el contenido que se puede escribir en un input como, por ejemplo, el número de una cuenta bancaria.
PrSortBy
Esta pipe te permite ordenar un array por una key del array.
PrFilter
Filtra el contenido de un array por defecto por todas las keys del array. Puedes configurarlo para buscar por ciertas keys u ordenar que evite buscar por determinadas keys.
PrTable
Esta tabla se puede customizar y configurar hasta el último detalle. Tiene diferentes opciones pre-configuradas, por las que obtendrás diferentes diseños con solo añadir una clase. Las clases disponibles son: table-structure, default-theme y border-lines. Además siempre puedes cambiar los estilos de lo que necesites con ::ng-deep.
Para construir la tabla solo tienes que pasar un array y añadir las columnas que quieres que se muestren; estas tienen que tener como id la key del elemento del array que se va a posicionar en esa celda. Tanto la tabla como las columnas tienen bastantes inputs para que puedas configurar la tabla como necesites.
Para extraer valores de la tabla puedes hacer que una columna tenga la propiedad de isLink a true y obtener el elemento clicado. También si incluyes botones en la tabla y seleccionas varios elementos, el resultado será el array de elementos seleccionados y el id que le hayas dado a ese botón.
Si quieres ver una demo de la librería de componentes de Angular 5, descarga el proyecto en GitHub. ¡Esperamos que te sea de utilidad!
