Vaadin Web Components using Template Tag do not work in Angular 6

Flow
1

I am having a heck of a time using Vaadin web components inside my Angular 6 application. The only issue is with the web components that use the <template> tag. I’d like to use the dropdown-menu component but when I click on the dropdown, nothing shows up.

I have gone through the steps of adding origami, the PolymerModule.forRoot() import, the CUSTOM_ELEMENTS_SCHEMA schema, and through trying different things, modified the polyfill.ts file, the angular.json file, etc.

Is there a guide or quick answer to using Vaadin components that use the template tag inside Angular 6?

Thank You!!

p.s. I’m using npm and webpack

2

I have continued having difficulty with this issue. So any contributors have more to work with, I have created this repo.

https://github.com/DaveOdden/vaadin-polymer-angular-app/tree/vaadin-integration

I have integrated the tabs Vaadin component, the (non-working) Vaadin dropdown component, and some polymer-paper elements in there. @Vaadin team, is there a tutorial on using web components in Angular that use the <template> tag? or am I missing something that would allow this to work?

By non-working, I mean, when I click the dropdown, nothing appears. With the web inspector opened, I can see the overlay element get added with both an opening and closing attribute present. But then the element is immediately removed. It looks like:

[...]

	<vaadin-dropdown-menu-overlay opening closing></vaadin-dropdown-menu-overlay>
</body>