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
Thanks
Sai
On Saturday, June 3, 2017 at 4:22:02 PM UTC-5, Trey Eckels wrote:
>
> 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/5f79ff57-3c20-4b3f-99e7-6be06f46fbe7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
