How to integrate nuxeo polymer 3 elements in angular app?

Question

I've built an Angular 6 app, and I need to include my Nuxeo Polymer 3 Elements (like this one https://github.com/nuxeo/nuxeo-elements/blob/master/core/nuxeo-search.js ).

How could I have something like:

<app>
   <dom-bind>
      <template>
        <nuxeo-connection
          id="nx"
          url="http://localhost:8080/nuxeo"
          username="Administrator"
          password="Administrator"
        ></nuxeo-connection>
        <nuxeo-search auto searches="{{searches}}"></nuxeo-search>
        <div class="container" class="layout vertical center">
          <template is="dom-repeat" items="{{searches}}">
            <div class="card">
              <div class="prop">
                <label class="propName">id:</label>
                <label class="propValue">[[item.id]]</label>
              </div>
            </div>
          </template>
        </div>
      </template>
    </dom-bind>
</app>

Answer 1

After some times, I can answer my question like explained here . In brief:

1. Enabling JS in angular in tsconfig.json:

{
  compilerOptions: {
    "allowJs": true
  }
}

2. Enabling custom elements schema in your app module:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({   
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],   
...
})

3. npm install your components
4. Use a <nuxeo-connection> in the index.html file before any angular digest
5. Finally - in you app.component.html use your web components

 <nuxeo-document-suggestion [router]="router" (selected-item-changed)="select($event.detail.value)" placeholder="Select a document"> </nuxeo-document-suggestion> <div *ngIf="doc"> <nuxeo-page-provider #pp auto provider="advanced_document_content" enrichers="thumbnail" page-size="5" [params]="params" (current-page-changed)="onResults($event.detail.value)"> </nuxeo-page-provider> </div>

Cherry on the cake, Nuxeo web components are available for angular but also React and Vue.js.