CODEWITHSUNDEEP
htmlcssimagecss-selectorspolymer
user2689782
user2689782

Reputation: 757

Polymer 1.x insert image with paper-input

Here is my situation - whenever there is a paper-input-error, I want to display an image with the error messafe. So I want to generate code such that it looks like

<paper-input-error ng-if="isError">{{errorMessage}}
    <iron-icon icon="icons:warning"</iron-icon>
</paper-input-error>

I was trying to add code using css using the ::after tag

<style>
   paper-input-error::before{
     content:'<iron-icon icon="icons:warning"</iron-icon>';   
   }
<style>

But that doesn't work. What is the best way to do this?

Upvotes: 0

Views: 76

Answers (1)

Herman Starikov
Herman Starikov

Reputation: 2756

// import paper-input-error
<dom-module id="element-name">

      <template>
        <style>
          /* CSS rules for your element */
        </style>

        <!-- local DOM for your element -->

        <paper-input-error ng-if="isError">{{errorMessage}}
           <iron-icon icon="icons:warning"</iron-icon>
        </paper-input-error>
      </template>

      <script>
        // element registration
        Polymer({
          is: "my-input-error",

          // add properties and methods on the element's prototype

          properties: {
            // declare properties for the element's public API
            isError: {
              type: Boolean,
              value: false
            },
            errorMessage: {
              type: String,
              value: 'Error!'
            }
          }
        });
      </script>

    </dom-module>

Upvotes: 1

Related Questions