First, install a library to allow Angular to correctly use web-components
npm install --save @webcomponents/webcomponentsjsThen, add the library script to your angular.json
"scripts": [
"node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
]After that you can install the web component library and use it in your components
npm install @fabrick/component-library --save// import the component and add the CUSTOM_ELEMENTS_SCHEMA in the parent component
import "@davide-angelillo/component-library/fbk-element";
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
schemas: [CUSTOM_ELEMENTS_SCHEMA] // This is mandatory!
})
export class AppComponent {
}<fbk-element
[inputField]="myValue"
(outputEvent)="catchEvent($event)">
</fbk-element>"Finally, to render icons correctly, import the icon list in your index.html
<link rel="stylesheet" href="@davide-angelillo/icons" />You should not use this library inside a React project.
Please use react-component-library instead
First you need to install the library via npm
npm install @fabrick/component-library --save
Then, inside your html file:
<body>
<script type="module">
import '@fabrick/component-library/fbk-element';
</script>
<fbk-element foo="Example"></fbk-element>
</body>- Create the component file
- Add its entry point in the
vite.config.tsto create the file at build-time - Add its entry point in the
package.json"exports" key to make it available singularly in the library - Always declare the component interface globally to make typescript compiler produce
.d.ts
You can do so by adding this sample code on the bottom of your component
declare global {
interface HTMLElementTagNameMap {
'fbk-element-tag-name': FbkElementClass
}
}Please read project's root README.md