Concorde functional component — Value. Simply shows a value from a data provider. Doc ID: core/components/functional/value/value. Keywords: Concorde, supersoniks, core/components/functional/value/value, value, Value, functional component, sonic-value, web component. URL: https://concorde.supersoniks.org/crawl/core/components/functional/value/value.html.

Value

Simply shows a value from a data provider. You can target sub data value using dot syntax. The value reacts to changes.

• Below is a form that helps you to set a value for the field "preference" in the data target with id "value-example"

<div formDataProvider="value-example">
      which one do you prefer  ?
      <sonic-radio name="preference" checked value="dogs"> Dogs</sonic-radio>
      <sonic-radio name="preference" value="cats"> Cats</sonic-radio>
    </div>

• Then you can see live value of the preference using this code :

I prefer <sonic-value dataProvider="value-example" key="preference"></sonic-value>

• If you have more complex data like this

<sonic-subscriber dataProvider="value-example-2" props='{"my":{"complex":[{"data":"👋 Hi There"}]}}'></sonic-subscriber>

• You can target it with the dot syntax

<sonic-value dataProvider="value-example-2" key="my.complex.0.data"></sonic-value>