Crea tu propia biblioteca de componente con Angular

Globaliza tu código con una biblioteca o libreria

Crea tu propia biblioteca de componente con Angular
Crea tu propia biblioteca de componente con Angular

Crea tu propia biblioteca de componente con Angular udemy course free download

Globaliza tu código con una biblioteca o libreria

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!