@ebiz-kit/angular v0.0.0

Project	Package	Version	License
Components	@ebiz-kit/components
React	@ebiz-kit/react
Angular	@ebiz-kit/angular
Vue	@ebiz-kit/vue

Introduction

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!

Vue

import { DemoComponent } from '@ebiz-kit/vue';

React

import { DemoComponent } from '@ebiz-kit/react';

Angular

import { ComponentsModule } from '@ebiz-kit/angular';

@NgModule({
  ...
  imports: [
    ComponentsModule
  ],
  ...
})
export class AppModule { }

Example: demo-component

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';
}

Working with events

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);
}