Paginación con StencilJS
Paginación con StencilJS


En el tutorial anterior de StencilJS vimos una introducción y pudimos desarrollar nuestro primer componente.

En esta entrada lo que vamos a hacer es ver cómo podemos utilizar componentes de StencilJS en Angular, en mi caso Angular 5, y la verdad que es un proceso muy simple, si recordamos bien, nuestro ejemplo era el siguiente.

Sencillamente es una aplicación de todos que nos permite interactuar con los datos de nuestro componente.

Lo que vamos a hacer ahora es pasar este componente a una aplicación desarrollada con Angular y Angular CLI.

Compilar componentes con StencilJS para exportar

Para exportar nuestros componentes a otros marcos de trabajo lo primero que debemos hacer es modificar el archivo stencil.config.js, en nuestro caso el siguiente ejemplo es suficiente.

Ahora vamos a compilar los componentes con el siguiente comando.

Este comando habrá creado todo lo necesario en el directorio /www/build de nuestro proyecto StencilJS, eso es lo único que necesitamos para poder utilizar componentes de StencilJS en Angular.

Utilizar componentes de StencilJS en Angular

Ahora abre tu proyecto Angular y coloca el directorio build de StencilJS dentro del directorio assets, una vez hecho, abre el archivo index.html y modifica el código por el siguiente.

Cómo puedes ver simplemente hemos añadido el archivo assets/build/app.js para poder hacer uso de los componentes.

Habilitar Web Components en Angular

Si queremos utilizar Web Components en Angular debemos modificar el módulo de nuestra app añadiendo CUSTOM_ELEMENTS_SCHEMA a schemas de la siguiente forma.

A partir de este momento estás en condiciones de utilizar cualquiera de los componentes de tu app en Angular sólo por utilizar el tag que has definido en tu componente StencilJS, en nuestro caso sería hola-mundo.