1# $$ Syntax: Two-Way Synchronization of Built-in Components 2 3 4The $$ operator provides a TS variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync. 5 6 7What the internal state is depends on the component. For example, for the [bindPopup](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md) attribute method, it is the **show** parameter. 8 9 10## Rules of Use 11 12- $$ supports variables of simple types and variables decorated by **\@State**, **\@Link**, or **\@Prop**. 13 14- Currently, $$ supports only the **show** parameter of the [bindPopup](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md) attribute method, the **checked** attribute of the [\<Radio>](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md) component, and the **refreshing** parameter of the [\<Refresh>](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-container-refresh.md) component. 15 16- When the variable bound to $$ changes, the UI is re-rendered synchronously. 17 18 19## Example 20 21This example uses the **show** parameter of the [bindPopup](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md) attribute method. 22 23 24```ts 25// xxx.ets 26@Entry 27@Component 28struct bindPopupPage { 29 @State customPopup: boolean = false; 30 31 build() { 32 Column() { 33 Button('Popup') 34 .margin(20) 35 .onClick(() => { 36 this.customPopup = !this.customPopup 37 }) 38 .bindPopup($$this.customPopup, { 39 message: 'showPopup' 40 }) 41 } 42 } 43} 44``` 45 46 47 48
