...
The above code snippets also showcases how inputs which interacts with the web component are disabled while the web component loads. The tag <kam-pickers> is custom tag for the WebComponent and needs to be added before it is possible to trigger the pickers by custom events.
Dynamic import
When using Angular as frontend framework a library called @angular-architects/module-federation and @angular-architects/module-federation-tools can be used instead of doing the ModuleFederation work yourself. Here you can setup yourself. By using angular-architects solution it is possible to load the module in code without specifying the remote in webpack.config.js. As shown below it is possible to call loadRemoteModule() instead as shown below.
information.component.ts
| Code Block |
|---|
...
webcomponent$ = from(
loadRemoteModule({
remoteEntry: 'http://localhost:4001/remoteEntry.js',
exposedModule: './WebComponent',
remoteName: 'kamPickers',
})
);
...
} |
Pickers
Below is a technical guide for each of the pickers implemented by Kam-pickers
ValueSet picker
The valueSet picker can be used to select the following valueSets:
...