How to do two-way data binding in DevExtreme tag box

Question

I use DevExtreme in my project. I would like to do two-way data binding in dx-tag-box. I use below syntax. But it throws an error, can somebody help.

<dx-tag-box [items]="sampleProducts" [(ngModel)]="[sampleProducts[0]]"></dx-tag-box>

Answer 1

In your case, I suggest you use the value option instead of ngModel:

<dx-tag-box
    [items]="simpleProducts"
    [(value)]="values"
</dx-tag-box>

Do not forget to set the values array in your component.ts file:

export class AppComponent {
    simpleProducts: string[];
    //...
    constructor(service: Service) {
        //...
        this.simpleProducts = service.getSimpleProducts();
        this.values = [this.simpleProducts[0]];
    }
}