DevExtreme Angular - Change Options

All operations with widget options are carried out through the properties of the component that contains the widget. To bind a widget option to a component property, enclose the option's name in "[( )]" and assign the name of the component property to it. This binding is illustrated by the following example where the value option of the TextBox widget is bound to the textBoxValue component property.

@Component({
    selector: 'my-app',
    template: '<dx-text-box [(value)]="textBoxValue"></dx-text-box>'
})
export class AppComponent {
    textBoxValue: string = 'Text box value';
}

Now, if you change the textBoxValue component property in code, the TextBox text will mirror the changes. And vice versa, if an end user changes TextBox in the UI, the textBoxValue component property will be updated.

View Demo

See Also