angular - using paper datatable in angular2

Question

I have been struggling for quiet a while about using paper-data-table (paper data table by David Mulder) in my angular 2 application.

The problem im facing is described in the data table issue: Issue opened regarding using the table in angular 2 applicaiton

Basically there is a use of the polymer undocumented dataHost property that gets incorrect value when using it in angular2. I have tried a few angles of solutions which I cant make any of them work completely: 1) I tried to find a way to make an polymer element that will wrap the table for me, I tried to give it the table defenition from the outside of the element (as an effective child) and then remove it from there and re-add it to the element local dom. The problem with the dataHost remainded the same, I even found that David himself reported this issue in the past (so I guess my solution can't work for the same reason that makes David code fail) Issue about adding elements to the localdom with the dataHost 2) In the issue page which I posted in the start of the questetion David suggested to use . This didnt work because of a new reason, the content of the inside this dom-bind was not even placed in the dom, I think I can connect this to the fact that angular2 reads the template tags in his "own way" and comments them if there isn't anything meanningful in them (such as an [ngIf] attribute for example).

I would really appreciate help with either solutions 1 or 2, or a different solution (I couldn't find a fullly featured material design table that might work in angular 2, so if there is one that im not aware of its an option too)

Thanks alot in advance for any help ! :)

-------------------- UPDATE -----------------------------

Some code examples to what I have tried so far:

<!-- Normal way of using the table, throws "Uncaught TypeError: Cannot set property '_pdt_getArrayItemLabel' of undefined" -->
    <paper-datatable [data]="data" selectable multi-selection>
        <paper-datatable-column header="Name" property="exmp" sortable editable>
            <!--<template is="dom-bind">-->
            <!--<paper-input value="{{data.exmp}}" no-label-float></paper-input>-->
            <!--</template>-->
        </paper-datatable-column>
    </paper-datatable>

    <!-- This code still throws "Uncaught TypeError: Cannot set property '_pdt_getArrayItemLabel' of undefined". I think
         Becuase of the polymer issue I linked to about dataHost bug I linked to in polymer git hub (the one David opened)-->
    <table-wrapper id="tableWrapper" is="dom-bind" [data]="data">

        <paper-datatable [data]="data" selectable multi-selection>
            <paper-datatable-column header="Name" property="exmp" sortable editable>

            </paper-datatable-column>
        </paper-datatable>


    </table-wrapper>

    <!-- The solution suggested by David in the data-table bug with angular 2 issue link. Could be really awosome if
        I could get this to work, but for some reason, the template tag gets commented in the html and this code
        is just removed from the dom, I think its related to the way angular 2 compiler deals with this template
        tag-->
    <template is="dom-bind">
        <paper-datatable [data]="data" selectable multi-selection>
            <paper-datatable-column header="Name" property="exmp" sortable editable>

            </paper-datatable-column>
        </paper-datatable>
    </template>

and here is how I tried to implement the table-wrapper:

<dom-module id="table-wrapper">

        <template>
            <!-- Using content tag will cause the exact same problem as not using the wrapper,
                 since it will become an effective child and not a real one-->
            <!--<content></content>-->
        </template>
        <script>

            Polymer({

                is: 'table-wrapper',
                attached: function() {
                    debugger;
                    var element = Polymer.dom(this);
                    var child = element.removeChild(this.children[0]);
                    var root = Polymer.dom(this.root);
                    root.appendChild(child);

                    // Though this should work, the dataHost property isnt correct, like stated in the issue that
                    // David opened in the polymer project
                }

            });

        </script>
    </dom-module>

Also important to say that the code that uses the table is in some component, where in the component I define the data property as a public one, so I can data bind it to the table data (I will always need to use it inside my components, and always will need to pass it parameters and data from the component, if there is an alternative to using the binding that can also work with the solution its good aswell

Answer 1

<template> elements are processed by Angular internally and never actually land in the DOM.

Some suggestions

• ensure you have shadow DOM enabled for Polymer and full polyfills loaded for browsers without native shadow DOM support. See also https://www.polymer-project.org/1.0/docs/devguide/settings.html

• you could wrap the element that provides the <template> and the data-table element inside another Polymer element, so that Angular doesn't process the <template> element because it's part of a Polymer element instead of a Angular view.

• you could try to add the template element imperatively to the DOM to circument Angulars template processing

See also this issue I reported recently https://github.com/angular/angular/issues/7974