1# $$ Syntax: Implementing Two-Way Synchronization for Built-in Components 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @Cuecuexiaoyu--> 5<!--Designer: @lixingchi1--> 6<!--Tester: @TerryTsao--> 7<!--Adviser: @zhang_yixin13--> 8 9The **$$** operator provides a TypeScript variable by-reference to a built-in component so that the variable's value and the component's internal state are kept in sync. 10 11 12The specific meaning of "internal state" varies by component. For example, for the [TextInput](../../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) component, it refers to the **text** parameter. 13 14 15## Usage Rules 16 17- Currently, **$$* supports variables of basic types. When such variables are decorated with state management V1 decorators such as [\@State](arkts-state.md), [\@Link](arkts-link.md), [\@Prop](arkts-prop.md), and [\@Provide](arkts-provide-and-consume.md), or state management V2 decorators such as [\@Local](arkts-new-local.md), changes in variable values will trigger UI updates. 18 19- Components supported by **$$** are listed below. 20 21 | Component | Parameter/Attribute| Initial API Version| 22 | ------------------------------------------------------------ | --------------- | ----------- | 23 | [Checkbox](../../reference/apis-arkui/arkui-ts/ts-basic-components-checkbox.md) | select | 10 | 24 | [CheckboxGroup](../../reference/apis-arkui/arkui-ts/ts-basic-components-checkboxgroup.md) | selectAll | 10 | 25 | [DatePicker](../../reference/apis-arkui/arkui-ts/ts-basic-components-datepicker.md) | selected | 10 | 26 | [TimePicker](../../reference/apis-arkui/arkui-ts/ts-basic-components-timepicker.md) | selected | 10 | 27 | [MenuItem](../../reference/apis-arkui/arkui-ts/ts-basic-components-menuitem.md) | selected | 10 | 28 | [Panel](../../reference/apis-arkui/arkui-ts/ts-container-panel.md) | mode | 10 | 29 | [Radio](../../reference/apis-arkui/arkui-ts/ts-basic-components-radio.md) | checked | 10 | 30 | [Rating](../../reference/apis-arkui/arkui-ts/ts-basic-components-rating.md) | rating | 10 | 31 | [Search](../../reference/apis-arkui/arkui-ts/ts-basic-components-search.md) | value | 10 | 32 | [SideBarContainer](../../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md) | showSideBar | 10 | 33 | [Slider](../../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md) | value | 10 | 34 | [Stepper](../../reference/apis-arkui/arkui-ts/ts-basic-components-stepper.md) | index | 10 | 35 | [Swiper](../../reference/apis-arkui/arkui-ts/ts-container-swiper.md) | index | 10 | 36 | [Tabs](../../reference/apis-arkui/arkui-ts/ts-container-tabs.md) | index | 10 | 37 | [TextArea](../../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md) | text | 10 | 38 | [TextInput](../../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) | text | 10 | 39 | [TextPicker](../../reference/apis-arkui/arkui-ts/ts-basic-components-textpicker.md) | selected, value| 10 | 40 | [Toggle](../../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md) | isOn | 10 | 41 | [AlphabetIndexer](../../reference/apis-arkui/arkui-ts/ts-container-alphabet-indexer.md) | selected | 10 | 42 | [Select](../../reference/apis-arkui/arkui-ts/ts-basic-components-select.md) | selected, value| 10 | 43 | [BindSheet](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet) | isShow | 10 | 44 | [BindContentCover](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md#bindcontentcover) | isShow | 10 | 45 | [Refresh](../../reference/apis-arkui/arkui-ts/ts-container-refresh.md) | refreshing | 8 | 46 | [GridItem](../../reference/apis-arkui/arkui-ts/ts-container-griditem.md) | selected | 10 | 47 | [ListItem](../../reference/apis-arkui/arkui-ts/ts-container-listitem.md) | selected | 10 | 48 49- When a variable bound using **$$** changes, it triggers synchronous UI re-rendering. 50 51 52## Example 53 54This example demonstrates two-way data binding using the **$$** operator with the **text** parameter of the [TextInput](../../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) component. 55 56 57```ts 58// xxx.ets 59@Entry 60@Component 61struct TextInputExample { 62 @State text: string = '' 63 controller: TextInputController = new TextInputController() 64 65 build() { 66 Column({ space: 20 }) { 67 Text(this.text) 68 TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller }) 69 .placeholderColor(Color.Grey) 70 .placeholderFont({ size: 14, weight: 400 }) 71 .caretColor(Color.Blue) 72 .width(300) 73 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 74 } 75} 76``` 77 78 79 80
