Crea tu propia biblioteca de componente con Angular

About Crea tu propia biblioteca de componente con Angular

Muchos desarrolladores de

Angular

utilizamos

bibliotecas

de terceros como

Angular material

,

primeng

, etc. pero, ¿y si pudiéramos crear nuestra propia biblioteca y compartirla con el resto del mundo? Pues esto lo vamos a ver en este curso. Veremos como hacerlo desde 0 con angular, crearemos algunos componentes, pipes, servicios y directivas para que veas todo el potencial que se puede sacar. Veremos como se puede subir a

github

y a

npmjs

y como se puede hacer documentación automáticamente con ComposeDoc. También nos crearemos una documentación personalizada como la de primeng. Estos son los elementos que realizaremos:

Join

: Pipe para unir varios elementos por el separador que nosotros le indiquemos.

Spinner

: Componente para esperar la carga de datos de la aplicación.

Dropdown:

Componente que nos permitirá elegir una serie de opciones, teniendo integrado un buscador.

Toast

: Componente que nos muestra mensajes de error, información, avisos o éxito. Como si fuera una notificación.

ClickOutSide:

Directiva que nos permite realizar alguna acción cuando clicamos fuera de un elemento concreto.

LoadIframe:

Directiva que nos permite indicar una acción al cargar un iframe con otra web.

Config Service

: Servicio para gestionar la información de un fichero JSON. Viene muy bien para el tema de configuración.

Detail

: Componente de un detalle base que podemos nosotros rellenar el contenido.

Block-List

: Componente que nos permite mostrar elementos en bloques, le podemos añadir una serie de acciones.

Tabs

: Componente para mostrar diferentes secciones en una misma página.

Resolution Service

: Servicio que nos indica en que resolución estamos (móvil, tablet o web)

Accordion

: Componente que al abrir aparece el contenido.

Translate

: Servicio para traducir textos.

Ng-Model-Base

: Clase base para utilizar nuestros componentes con ngModel.

Toggle

: Componente para activar/desactivar.

Modal

: Componente para mostrar modales. En este curso, se ha realizado con Angular 12, pero se puede realizar en versiones posteriores. A partir de la versión 6. Vemos como manejar el tema de versiones de nuestra biblioteca. También aprenderemos como podemos subir nuestra biblioteca a Github con Visual Studio Code. Además, veremos como funciona Github packages. ¡Disfrutar del curso!