angularpolymer-3.xnuxeo

How to integrate nuxeo polymer 3 elements in angular app?


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>

Solution

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

    1. Enabling JS in angular in tsconfig.json :
    {
      compilerOptions: {
        "allowJs": true
      }
    }
    
    1. Enabling custom elements schema in your app module:
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    ...
    @NgModule({   
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA],   
    ...
    })
    
    1. npm install your components
    2. Use a <nuxeo-connection> in the index.html file before any angular digest
    3. 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.