Search code examples
angularweb-componentangular-elements

Using angular elements inside the same angular project

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>
Solution

  • 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)