CODEWITHSUNDEEP
htmlpolymer
user4685154
user4685154

Reputation:

Displaying data in HTML using polymer

I have the following files:

shop-categories.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="shop-category-data">

  <script>
  (function() {

    let val = "Country";

    class ShopCategoryData extends Polymer.Element {

      static get is() { return 'shop-category-data'; }

      static get properties() { return {

        regionFilter: {
          type: String,
          value: val,
          notify: true
        }
        }
        }
    }

      customElements.define(ShopCategoryData.is, ShopCategoryData);

    })();

</script>

</dom-module>

Here is shop-app.html file

<link rel="import" href="shop-category-data.html">
<dom-module id="shop-app">

  <template>

    <shop-category-data regionFilter="{{regionFilter}}"></shop-category-data>

    <h1>HELLO</h1>
    <h1>{{regionFilter}}</h1>
  </template>

  <script>

       class ShopApp extends Polymer.Element {

      static get is() { return 'shop-app'; }    

    }

    customElements.define(ShopApp.is, ShopApp);

  </script>

</dom-module>

I am trying to pass the value of region from shop-categories to shot-app. It is displaying HELLO but country is not getting displayed. I think these 2 lines should handle the display but they are not.

 <h1>HELLO</h1>
        <h1>{{regionFilter}}</h1>

Upvotes: 0

Views: 85

Answers (1)

Ofisora
Ofisora

Reputation: 2737

When you use camelCase property name (i.e. regionFilter) as an attribute, it has to be converted to dash-case version (i.e. region-filter).

Change:

<shop-category-data regionFilter="{{regionFilter}}"></shop-category-data>

to:

<shop-category-data region-filter="{{regionFilter}}"></shop-category-data>

Here is the working plnkr link: http://plnkr.co/edit/A5FxAf?p=preview

Upvotes: 1

Related Questions