Project | Package | Version | License |
---|---|---|---|
Components | @ebiz-kit/components |
||
React | @ebiz-kit/react |
||
Angular | @ebiz-kit/angular |
||
Vue | @ebiz-kit/vue |
Ebiz Kit is a UI Component Library based on Web Components and StencilJS. This library overcome the bad experience of integrating web components into existing applications which can be tricky at times. More about this can be read at https://custom-elements-everywhere.com/. In order to accommodate the various issues and API compatibility with other javascript frameworks, Ebiz has made some wrapper/output plugins to make the process simpler.
The plugins add additional output targets for each framework binding that is included.
You can learn more about using the plugins in your project below.
PLEASE NOT THAT THIS LIBRARY IS UNDER FULL DEVELOPMENT AND WILL HAVE MANY BREAKING CHANGES. DO NOT USE IT IN YOUR PROJECTS YET.
Your ideas for improvements and features are very much appreciated!
import { DemoComponent } from '@ebiz-kit/vue';
import { DemoComponent } from '@ebiz-kit/react';
import { ComponentsModule } from '@ebiz-kit/angular';
@NgModule({
...
imports: [
ComponentsModule
],
...
})
export class AppModule { }
Now we can add a web component to one of our Angular components. Take for example our app.component
.
In our template we add:
<demo-component [first]=firstProperty last="Doe"></demo-component>
As you can see, the first
property acts as an Angular input, that gets passed in a variable named firstProperty
, which will need to be defined in our component. last
is just a string
.
export class AppComponent {
firstProperty = 'John';
}
StencilJS provides a way to work with events. This is based on the DOM events specification which is a web standard.
demo-component
has an event defined that can be triggered when clicking the component. Let's say the event is called myCustomEvent
.
To catch an event in Angular that is emitted from a web component, you have 2 options. Using @HostListener
:
@HostListener('myCustomEvent', ['$event'])
onMyCustomEvent($event) {
console.log('Event using @HostListener', $event);
}
Or adding a callback function to the component:
<demo-component [first]=firstProperty last="Doe" (myCustomEvent)="catchEvent($event)"></demo-component>
catchEvent($event) {
console.log('Event using callback on demo-component', $event);
}