Usage of $= to bind dynamic value into a class attributes

[André Jacques]

Hi,

  I have a problem with the $= operator.

  I've got a component I've created, call it "somecomponent". This component works just fine but I want to add a class to help me customize some stuff. This class will be fetch from a datasource.

  I create a property like this:

properties: {
    somevar: {
        type: String,
        readOnly: true
    },
...

  I pass the value while creating my component in my webpage as such:

<somecomponent somevar="<?= $datasource['somevar'] ?>"></somecomponent>

and use it in my

<div class$="{{somevar}}"></div>

When I look in the Google Chrome inspector, I see the

<somecomponent somevar="somevalue"></somecomponent>

But in the div, I always see

<div class="style-scope somecomponent"></div>

What am I doing wrong?

[Daniel Llewellyn]

Setting the property as readonly means you cannot assign a value to it using the declarative markup in your page. This has the effect that the component discards the value you set in the attribute in the html.

 

Normally you would set the value statically in the property definition in your component when defining the property as readonly. To be able to assign a value to the property from outside the component via html markup then you need to remove the readonly setting.

 

--

[André Jacques]

It did the trick :) Thanks.