web-adapter-js
v0.1.16
Published
Web Adapter es un paquete que te permite tener una comunicación dinámica con tus Web Componets externos, además podrás cargar tus estilos de forma dinámica.
Downloads
406
Maintainers
Readme
Web Adapter es un paquete que te permite tener una comunicación dinámica con tus Web Componets externos, además podrás cargar tus estilos de forma dinámica.
- Facil de utilizar.
- Carga tus componentes.
- Puedes Listar y eliminar tus web component.
- Custom event
Documentación
Instalación
$ cd myApp
$ npm install web-adapter-js
En tu modulo principal agrega esta configuración.
import { Adapter } from 'web-adapter-js';
export class AppModule {
constructor() {
const adapter = new Adapter();
adapter.init(['angular']);
}
}
Agregar un Web Component
import { ComponentAdapter, UiAdapter } from 'web-adapter-js';
@Component({
selector: 'app-component',
template: `<my-component></my-component>`,
})
export class AppComponent implements OnInit {
public componentAdapter = new ComponentAdapter();
public uiAdapter = new UiAdapter();
constructor() { }
ngOnInit() {
this.uiAdapter.loadStyles([{name: 'my-style', src: 'https://cdn.com/my-style.css'}]);
this.microAdapter.loadComponents([{name: 'my-component', src: 'http://localhost:8000/main.js'}]);
}
}
Custom Event
import { EventHandler } from 'web-adapter-js';
const event = EventHandler.custom('[MY_CUSTOM_EVENT]');
// Dispatch
event.dispatch({ example: { ...payload } }, '[KEY]')
// Listen
const event = EventHandler.custom('[MY_CUSTOM_EVENT]');
event.onChanges((payload)=> console.log(payload), '[KEY]');
Micro Frontend
Aplicación de ejemplo Netflapp
License
MIT
Jose Navarro - Trabajo con <3