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
$ 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']);
}
}
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'}]);
}
}
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]');
Aplicación de ejemplo Netflapp
MIT
Jose Navarro - Trabajo con <3