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
On Friday, June 2, 2017 at 9:37:14 AM UTC-7, Naga Sai A wrote:
>
> 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>
>
>
> 1. 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
>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/0e7ee66d-7093-46dd-ba92-a9ae4165d8fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
