Usar Web Components en Angular
HTML-код
- Опубликовано: 19 окт 2020
- Aprende a usar Custom Elements, del estándar de Web Components, en una aplicación desarrollada con el framework Angular.
En este vídeo verás cómo integrar un componente desarrollado con el estándar de los Web Components, dentro de una aplicación Angular. Además aprenderás a integrar estos Custom Elements para que puedan conversar perfectamente con los componentes de Angular.
Verás cómo usar el sistema de binding de Angular para enlazar propiedades de los componentes Angular con los atributos del Custom element. Cómo escuchar eventos personalizados de los custom elements para reaccionar a ellos con cambios en la aplicación Angular.
El código del proyecto realizado en vivo está en este repositorio:
github.com/EscuelaIt/Web-Comp... 
Наука
Saludos Miguel.
Excelente video y muy necesario, por lo que muchísimas gracias por este aporte.
Querría saber como seria en caso de que el web component este hecho en stencil, porque este opción no me funciona para importar diferentes web components hechos con dicha tecnología.
y dónde encuentras el problema?, porque en principio no debería cambiar mucho si usas stencil o cualquier otro web component.
Hola Miguel, excelente video.
Una consulta, yo todavía estoy con jQuery. Quiero pegar el salto, estuve mirando muchos vídeos y lo que más accesible me pareció es usar livewire jetsream con Laravel, antes q vue, angular o react.
Para empezar a aplicar webcomponets en mis proyectos.
Q me recomendas viniendo de jquery?
Si usas Laravel, Livewire y Jetstream me parece una solución bastante cerrada, es decir, compacta, que encaja bien. Sin embargo, aunque tengo mucha experiencia con Livewire, creo que encaja bien en el tipo de proyectos de sitios web generados con Laravel, pero no se pueden matar todos los pájaros con la herramienta, por ejemplo aplicaciones modernas no sería tan apropiado. Por eso en Laravel han sacado también integración con Inertia, que creo que complementa bien posibles necesidades. Sin embargo, Web Components es algo más transversal, que encaja en prácticamente cualquier tipo de proyecto, con cualquier framework. Una vez tienes tus componentes los puedes usar siempre que lo necesites. Para mi Web Components es una llave inglesa, que la puedo usar en cualquier proyecto, tanto aplicaciones frontend, sitios web con Laravel, WordPress, o sitios estáticos HTML/CSS, por poner varios ejemplos. Si quieres tomarle el pulso al desarrollo de tus componentes te recomiendo ver este vídeo corto: ruclips.net/video/rfI0hHTyH8g/видео.html o esta clase inicial del curso de LitElement ruclips.net/video/df8AgOqv-ew/видео.html
@@deswebcom crack, muchas gracias
Excelente video, tengo una pregunta, se pueden agregar estos componentes de forma dinamica?, es decir, que a lo mejor no lo declaro en el html la etiqueta de la hamburguesa, sino mas bien desde el propio javascript agregarlo a una parte del dom principal. Saludos
Puedes crear los elementos dinámicamente, con JS nativo document.createElement developer.mozilla.org/es/docs/Web/API/Document/createElement igual que lo haces con cualquier etiqueta normal, e insertarlos dentro del DOM donde lo necesites. como son Web Components se comportan como elementos nativos del HTML.
cordial saludo, he estado intentando hacer un web component en angular, tal como lo presentas pero con la diferencia que quiero que mi web component tenga integrado elementos de angular material, el resultado fue un desconocimiento de material por parte del web component, quizá podría realizar un intento de esto?
Yo creo que no es un camino adecuado intentar hacer un web component estándar basandose en Angular Material que no es estándar. Si quieres hacer web components que tienen aspecto de material design, tienes los componentes material design basados en web components github.com/material-components/material-components-web-components
Hola", disculpen en la plataforma web no se pueden descargar los libros o manuales, dice que no se encuentra la descarga en el servidor, eso pasa con todos? no tengo problemas en realizar mi donación pero quería asegurarme de que encontrare la descarga
Nuestro servidor estaba en OVH y este proveedor sufrió un incencio que acabó con nuestros servidores y con todas las copias de seguridad que teníamos en su cloud. Estamos esperando a ver si nos responde y podemos restaurar todos los manuales o tenemos que volver a generarlos a partir de las copias que tenemos en local. Esperamos tener esta actuación completada en una semana o dos.
Podrías por favor integrarlo con Vue estaría genial
Genial! lo veremos en Vue también, gracias por comentar!
Hola.
¿Podrías comentarnos como utilizar el componente usando solo javascript? ¿Sin integrarlo en ningún framework?
Gracias por el video. Me ha gustado mucho .
En el pasado vídeo lo hicimos con Javascript, apoyándonos en una herramienta llamada Snowpack. ¿Lo pudiste ver? ruclips.net/video/uhJCBYQ1XTs/видео.html Tengo intención de verlo también con otras herramientas como puede ser Webpack. Si quieres concretar un poco más cómo te gustaría verlo, te lo agradezco.
@@deswebcom
Pues mi idea había sido el saber integrar este tipo de componentes lo más limpio posible sin el uso de framework externos. Sin embargo voy a ver ese video que me sugieres y me enterare un poco más de como funciona.
Lo quiero aplicar a páginas html css y javascript limpias que no estén encerradas en ningún framework javascript.
Por eso tal vez vue ayude un poco porque no encapsula tanto , ni obliga a trabajar de una forma determinada a como lo hace angular.
Admiro mucho vuestro trabajo.
Un saludo
@@bioquimic1 Estupendo, mira ese vídeo y luego me comentas qué te ha parecido y por dónde te interesaría que se profundizara. Muchas gracias por los comentarios! :)