# Mix

Mix allows you to mix several subsets of dataProvider in a new key/value structure which is itself associated with a new dataProvider. The data update is then bidirectional.

Dot notation is supported to extract a sub-part of the data.

For example, if we declare dataproviders as follows :
<sonic-code>
  <template>
    <sonic-subscriber dataProvider="dataToMixA" props='{"foo":{"bar":2}}'></sonic-subscriber>
    <sonic-subscriber dataProvider="dataToMixB" props='{"baz":3}'></sonic-subscriber>
  </template>
</sonic-code>
We can rearrange the data as follows
<sonic-code>
  <template>
    <sonic-mix dataProvider="mixedData" composition='{"either":"dataToMixB","orThat":"dataToMixA.foo.bar"}'>
      <div>Value of dataToMixA.foo.bar and mixedData.orThat : <sonic-value key="orThat"></sonic-value></div>
      <div>Value of dataToMixB.baz and mixedData.either.baz : <sonic-value key="either.baz"></sonic-value></div>
    </sonic-mix>
  </template>
</sonic-code>
Then we can change values in both dataProviders programaticaly this way, they will stay in sync
<sonic-code language="javascript">
  <template>
  SonicPublisherManager.get("mixedData").either.baz=6;
  SonicPublisherManager.get("dataToMixB").baz=8;
  SonicPublisherManager.get("dataToMixA").foo.bar=8;
  SonicPublisherManager.get("mixedData").orThat=6;
  </template>
</sonic-code>
Or by using a form element
<sonic-code>
<template>
<sonic-input label="mixedData.orThat" formDataProvider="mixedData" name="orThat"></sonic-input>
</template>
</sonic-code>