2

I'm trying to create a UI kit as reusable web components (using angular elements). I have did a test run to see whether the custom elements that we are developing inside angular project, can be used within that angular project too (In simply, i want to create a documentation like page, for the UI kit + how can i test the UI components that i'm developing - inside the same project).

Here is the link to stackblits https://stackblitz.com/edit/angular-elements-test-kavinda

I used a separate module called buttons module to develop the ui components, and custom element defining is also done in that module. And i tried the app-component.html to use thosed elemnts - which didn't worked.

Primary-btn-component.html

<button>
  <slot name="icon_left" class="icon_left"></slot>
  <slot name="btn_text" class="btn_text"></slot>
  <slot name="icon_right" class="icon_right"></slot>
</button>

Code used to define the custom element

const btnElem = createCustomElement(PrimaryBtnComponent, { injector: this.injector });
customElements.define('primary-btn', btnElem);

Then used that element as below in app-component.html

<primary-btn>
  <span slot="btn_text">Button</span>
</primary-btn>
Kavinda Jayakody
  • 705
  • 1
  • 13
  • 25

2 Answers2

2

Create a project without an app

ng new my-lib --create-application=false

then add a library

ng generate library my-lib

and then add a demo app that uses the library

ng generate application my-lib-demo

Detailed steps are in this article.

https://nezhar.com/blog/up-and-running-library-development-with-angular-7/

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • Nice approach man :). I fixed my error using web components es5 adaptor. Will ad it as a answer. But this approach is good too, so let's keep it :) – Kavinda Jayakody May 15 '19 at 06:03
0

Found a fix. I used this Web-Components ES5 adaptor

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/custom-elements-es5-adapter.js"></script>

Use this in the index.html (inside of the head section)

Kavinda Jayakody
  • 705
  • 1
  • 13
  • 25