So I understand how basic property binding works in angular for elements like input, but I came across some code that was using node module ng-drag-drop which comes with a set of its own custom directives. In html of a component there is a div element that uses one of the directives called droppable and property binding [dragOverClass]="'drag-target-border-green'" but DIV elements have no property like dragOverClass. So where does it come from? The directive? I was checking angular docs for data binding and it says nothing about this, just basic property binding chapter with input value examples. Thanks for the help.
Related
Currently I'm rendering the html string using innerHtml property after bypassing the angular sanitizing mechanism this is working for rendering the contents. But not able to map the event handlers to a function in angular component.
E.g.the html string will contain a button like below
<button (click)="callme()">Click</button>
the callme function will be part of angular component file. I want this click event to be handled in angular function.
Is it possible to parse this string to html dom and handle the events in angular components.
Sample code which describes this scenario and using angular cdk Portals.
https://stackblitz.com/edit/angular-upaudh?file=src%2Fapp%2Fcdk-portal-overview-example.ts
There are 2 ways that you can implement it, it depends from what you want.
The easy way is to use innerHtml input like this:
HTML
<div [innerHTML]="htmlStr"></div>
TS
htmlStr: 'Hello';
If you want to create a dynamic template that will be translated to HTML at build time. Then you have to go with Portals.
PS: In your example (in the comments) you use [innerHtml] and try to bind it in a Portal. Again [innerHtml] will not be translated before runtime so your click event will not be in the same scope as your component. The thing that you ask is an open conversation in github: Issue. For now you can use the alternatives above to solve your case. You can use innerHtml, and then use renderer2 or native element reference to bind click events to your functions, after they have rendered on the view.
I have a set of custom polymer elements, that I would like to use within an angular 2 application.
It seems like there's a problem concerning the content tag of the polymer element. The content of the element gets rendered at the wrong place within the polymer element, if the element is located within an angular 2 component.
Example:
The template of my polymer element "my-button" looks like this:
<template>
<button>
<content></content>
</button>
</template>
Use outside angular
When I use this element outside of my angular 2 component, I get the result that I expected:
Use:
<my-button>Foo</my-button>
Result:
<my-button>
<button>
Foo
</button>
<my-button>
Use within angular 2 component
When used within an angular 2 component, the content always gets rendered at the end of the elements template. Just like the content tag didn't exist.
Use:
<my-button>Foo</my-button>
Result:
<my-button>
<button>
</button>
"Foo"
<my-button>
Question
The problem might be, that polymer and angular 2 both use the content tag for transclution. So maybe things get a little messy when using both together.
I would love to use all of my polymer elements inside angular 2. So any ideas on how to fix this would be very much appreciated.
There are a few open issue about Angular2 combined with Polymer. For example Angular doesn't use Polymer.dom(el)... for manipulating a Polymer elements children. This is probably what breaks your components.
A workaround is to enable full shadow DOM and polyfills. See https://www.polymer-project.org/1.0/docs/devguide/settings.html
An issue I haven't found a solution yet is passing <template>s (like required for example for <iron-list>. Angular handles templates on its own and doesn't pass it to the Polymer element.
There is a ngNonBindable directive. I haven't tried it yet on the <template ngNonBindable> myself but it might work. I tried it seems that's only to ignore [prop]="field"/prop="{{field}} bindings.
Another issue is with <style is="custom-style">. They can only be added in the <head> element or within Polymer elements, but not to Angular components.
See also Two-way binding in Angular 2 with NgModel and mutating bound property?
Check out https://www.npmjs.com/package/#vaadin/angular2-polymer, which should resolve most issues in integrating Polymer elements to Angular 2.
User guide: https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc
Tutorial (draft): https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc
Better shady DOM support is waiting to be merged from a separate branch (should be merged and released within two weeks): https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter
It would be great if you could try it out and see if it works for you!
Eventually, the documentation will be published at https://vaadin.com/docs/
I need to create an custom-element dynamically.
I tried
var newElement= document.createElement('custom-element');
this is work. but My problem is when I want to add attribute to this element, to bind an array to this element.
I tried
newElement.setAttribute('data','{{data}}')
But it says that it expected to array and received '{{data}}'
How can I add this binding to dynamically elements?
I dont think this is possible right now, please see from kevinpschaaf:
https://github.com/Polymer/polymer/issues/1778
No, we don't currently support this, outside of dom-bind, which is the
only template implementation that late-binds instance children. You
can document.createElement('template', 'dom-bind'), then you can
dynamically append children with binding annotations to its content,
and the bindings will only be evaluated once the dom-bind is attached
to the document. See tests here that show this usage of it:
https://github.com/Polymer/polymer/blob/master/test/unit/dom-bind.html#L95
Note that dom-bind does not currently allow binding to outer scope, so
it has limited use in custom element templates (it's main use case is
for binding between elements in the main document), and that's not
likely to change short-term.
We are achieving a lot of performance optimization by baking the
binding connections into the prototype at registration time for an
element (rather than at instance time), and we haven't built up enough
of the machinery to easily allow runtime addition/removal of bindings.
Is there any way to achieve angularjs attribute directive in polymer. I want to call a function based on a particular attribute attached to any element.
This is what works for me right now, but this is very non-generic.
Is there any easier way to extend behavior of elements using just attributes like
<paper-input behavior="custom-behavior" custom-behavior-attribute="some-data"></paper-input>
I have started building an app in Polymer which was already done in Angular. Even I had the same query running on my mind and I found this link related to this topic and it says Polymer's behavior is the equivalent to Angular's attribute directive.
https://plus.google.com/+JustinFagnani/posts/EjdR14bA7Dj
It will be useful if someone can confirm that there are no other approach available to achieve the same.
I was trying to use a ref and selector approach for setting / showing/ hiding a field on one of the tabs in a 6 tab panel. It throws an error saying:
Uncaught TypeError: Object [object Object] has no method 'get method
for selector.'
Is ref selector only to be used in a controller? I dont want to use Ext.getCmp() or Ext.ComponentQuery.query(). They are not recommended to use approach by ExtJs guys. We can use ref and selector in controller with out any problem by specifying the view in the views[] part and ref and selector in refs[] part. ref : 'x' selector:'xyz #x' this.getX()...
I followed the same method for referring a field inside a view. It fails. Why so? What are the other possible ways to set, hide and show fileds in other tabs not by Ext.getCmp() or Ext.ComponentQuery.query()...
Thoughts and suggestions are always welcome! thank u!
I believe refs are only available from within a controller. The recommended practice is using the down method. It works just like the component query except it only finds children of the component it is called from. So something like this should work.
YourTab.down('#fieldItemId').hide();
It appears in sencha docs that adding a ref is adding the method to the controller. So it would not be available outside the controller. Additionally, the method is actually internally executing Ext.ComponentQuery. Please see here for the information in sencha docs regarding refs