First, install a library to allow Angular to correctly use web-components
npm install --save @webcomponents/webcomponentsjs
Then, 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>"