Using angular elements inside the same angular project

Question

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>

Adrian Brand · Accepted Answer · 2019-05-15 05:18:56Z

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/

answered May 15, 2019 at 5:18

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kavinda Jayakody Over a year ago

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 · Accepted Answer · 2019-05-15 06:04:57Z

0

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

<script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>

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

answered May 15, 2019 at 6:04

Kavinda Jayakody

7862 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using angular elements inside the same angular project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related