polymer-1.0

I decided to take some time this weekend to look at Angular 2 and Polymer. I'm really interested in angular 2 and would really like to start building something with it. One downside with starting with Angular 2 now is that there is no good component library yet. However, since Angular 2 claims that it should work so good together with Web Components I thought of giving Polymer a try. I have succeeded to bind data to simple components like an input field. What I'm stuck at for the moment is how to bind a model to the selected object of a paper-dropdown-menu. Since I'm very new into both I don't

Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop? So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable> ). I also tried a "hack-fix" ( suggested by someone ) involving setting z-index: auto in the css of paper-header-panel . Neither works. It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute. Any ideas? Similar issues Appearing around the internet are this issue report and this Stackoverflow question . my-element.html <script src="http://www.polymer-project.org

I'm trying to include classes based on parameters of a json, so if I have the property color, the $= makes the trick to pass it as a class attribute (based on the polymer documentation ) <div class$="{{color}}"></div> The problem is when I'm trying to add that class along an existing set of classes, for instance: <div class$="avatar {{color}}"></div> In that case $= doesn't do the trick. Is any way to accomplish this or each time that I add a class conditionally I have to include the rest of the styles through css selectors instead classes? I know in this example maybe the color could just

In polymer 1.2.3, Is it possible for a dom-repeat to use content as a template and bind values to the elements provided? Custom Element: <dom-module id="modify-collection"> <template> <div> <template is="dom-repeat" items="[[collection]]"> <content></content> </template> </div> </template> </dom-module> Usage: <modify-collection collection="{{things}}"> <list-item resource="[[item]]"></list-item> </modify-collection> I've looked at the following resources without help: Polymer: How to watch for change in <content> properties Polymer 1.0 template bind ref equivalent Data-binding between nested

How do you style the <paper-input> tag in Polymer 1.0 Can you show how to specifically custom style the label text color, the underline color, input text color, and how to access them using custom-style ? Mikael E. Wikner You can change the appearance of <paper-input> by changing the custom properties listed over here (The information has been moved for the most recent version - it is available for versions older than v1.1.21). Here's an example: <style is="custom-style"> :root { /* Label and underline color when the input is not focused */ --paper-input-container-color: red; /* Label and

This question already has an answer here: How to add conditional attribute in Angular 2? 6 answers I have some code that uses Polymer attributes on elements, for example: <paper-drawer-panel force-narrow> The way polymer works is that I can't simply say force-narrow="false" if I want to disable the attribute, it has to be removed altogether. Is there a way in Angular2 to conditionally remove the entire attribute? I can't seem to find any information on this topic. I could use ngIf and repeat the entire element with and without the attribute but I would rather not if possible. Thanks! Edit -