Polymer- using custom element in other projects like angular and Java jsp

Naga Sai A

unread,

Jun 2, 2017, 12:37:14 PM6/2/17

to Polymer

Hi

I am trying to create custom form element which I am trying to reuse in other applications developed in angular and jsp page of Java

my-element.js:

    class MyElement extends HTMLElement {
      // This gets called when the HTML parser sees your tag
      constructor() {
        super(); // always call super() first in the ctor.
        this.msg = 'Hello, World!';
      }
      // Called when your element is inserted in the DOM or
      // immediately after the constructor if it’s already in the DOM
      connectedCallback() {
        this.innerHTML = `<form action="/action_page.php">
      <div class="container">
        <label><b>Name</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

       <label><b>Age</b></label>
        <input type="text" placeholder="Enter Age" name="age" required>


        <div class="clearfix">
          <button type="button"  class="cancelbtn">Cancel</button>
          <button type="submit" class="signupbtn">Add</button>
        </div>
      </div>
    </form>`;
      }
    }
    // This registers your new tag and associates it with your class
    window.customElements.define('my-element', MyElement);

my-element.html:

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <script src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html">
    <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html">
    <script src="my-element.js"></script>
    <!-- <link rel="import" href="add-form.html"> -->

</head>
<body>
<my-element></my-element>

</body>
</html>

Two issues I am struggling with now are below

1.Can i incude both the files as below to my angular and java jsp page and use custom tag to work?

<link rel="import" href="my-element.html">
<script src="my-element.js"></script>

 <my-element></my-element>

I am trying to pass below json object as an attribute to custom form element and trying to render custom form elements

[ { "name":"Name", "type":"text", "size":"20", "readyOnly": false, "validateFunction":"onlyText" }, { "name":"Age", "type":"number", "size":"3", "readyOnly": false, "validateFunction":"onlyNumber" } ]

I tried using below way to inject json data to custom element to render form elements based on json but no luck and there are no console errors

<my-element form-data="{{data}}"></my-element>

https://stackoverflow.com/questions/44333308/polymer-using-custom-element-in-other-projects-like-angular-and-java-jsp

Trey Eckels

unread,

Jun 3, 2017, 5:22:02 PM6/3/17

to Polymer

Hi Naga, it looks like this is using a web component as opposed to a polymer component. The native web component API does not include data binding, although angular and polymer both do (but implemented in different ways).

Native web components and polymer components can be used with Angular as well as other frameworks.

Are you planning to use angular.js (1) or Angular(2+)?

Trey

Naga Sai A

unread,

Jun 3, 2017, 10:04:34 PM6/3/17

to Polymer

Hi Trey,

I am using to create reusable templates which can be used across all technologies like Angular1,Angular 2 , Java, .NET like form template, layout , grid, list