angular 2 polymer elements style

Question

I'm using Angular2 with Polymer Elements and it's working fine. But if I try to style some of the Polymer Elements, e.g. Paper-Input it does not work.

I've tried to add the styles into the component, the index.html everywhere but it seems, that my new styles are ignored.

For example, i added the following to my css.

paper-input:root{
    --paper-input-container-focus-color: yellow;
}

If I focus the paper-input, the font color is still the default blue.

Has anybody experience with angular 2 in combination with polymer elements and know, what I#m doing wrong and whoe to change the font-color or the underline color of an paper-input?

Thank you

hotforfeature hotforfeature · Accepted Answer · 2017-05-05T14:24:50

Late reply, but if you're trying to get Angular 2 and Polymer 1 to work together, take a look at https://github.com/platosha/angular-polymer.

If you want Angular 4+ and Polymer 2 to work together, check out https://github.com/hotforfeature/origami.

I can't tell if you're using Polymer 1 or 2, but the problem is that your styles are not <style is="custom-style"></style> for Polymer 1, or <custom-style><style></style></custom-style> for Polymer 2.

You can use either of those libraries to bridge the gaps between Angular and Polymer, or write your own simple service to add/wrap the correct style attributes/tags at runtime.

angular 2 polymer elements style

1 Answers