$$ Syntax: Two-Way Synchronization of Built-in Components

The $$ operator provides a TypeScript variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync.

What the internal state is depends on the component. For example, for the TextInput component, it is the text parameter.

NOTE

$$ is also used for by-reference parameter passing for the @Builder decorator. Pay attention to the differences between the two usages.

Rules of Use

Currently, $$ supports basic variables and variables decorated by @State, @Link, and @Prop.
$$ supports the components listed below.

Component	Supported Parameter/Attribute	Initial API Version
Checkbox	select	10
CheckboxGroup	selectAll	10
DatePicker	selected	10
TimePicker	selected	10
MenuItem	selected	10
Panel	mode	10
Radio	checked	10
Rating	rating	10
Search	value	10
SideBarContainer	showSideBar	10
Slider	value	10
Stepper	index	10
Swiper	index	10
Tabs	index	10
TextArea	text	10
TextInput	text	10
TextPicker	selected, value	10
Toggle	isOn	10
AlphabetIndexer	selected	10
Select	selected, value	10
BindSheet	isShow	10
BindContentCover	isShow	10
Refresh	refreshing	8
GridItem	selected	10
ListItem	selected	10

When the variable bound to $$ changes, the UI is re-rendered synchronously.

Example

This example uses the text parameter of the TextInput component.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column({ space: 20 }) {
      Text(this.text)
      TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(300)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

TextInputDouble