CODEWITHSUNDEEP
angular
user3208483
user3208483

Reputation: 397

Angular 2 Binding to Array Value

I am trying to bind to the value of an array in my template view. In AngularJS I accomplished this as follows

 <div dx-text-box="{bindingOptions: {
       value: 'mainTableData[0].{{childControl.FieldName}}'
 }}"></div>

This worked fine but fails in Angular2, below is what I tried.

<dx-text-box
       [(value)]="mainTableData[0].{{childControl.FieldName}}">
</dx-text-box>

What would be the correct way to do this now? I have tried changing to to a function which returns the correct array value but this also fails.

Upvotes: 0

Views: 3297

Answers (3)

Joe Keene
Joe Keene

Reputation: 2351

Could you potentially use a function to get your value rather than do it in the template?

<dx-text-box
       [value]="getMyValue(childControl.FieldName)" (valueChanged)="updateValue($event)>
</dx-text-box>

Inside your parent component:-

public getMyValue(name) {
    return this.mainTableData[0][name];
}

public updateValue(event) {
    console.log("new value", event.target.value);
}

Inside your dx-text-box component:-

@Ouput public valueChanged: EventEmitter<any> = new EventEmitter();

public functionThatsFiredWhenChangesHappen(value) {
    this.valueChanged.emit(value);
}

Upvotes: 0

YounesM
YounesM

Reputation: 2317

It will probably be something like this (assuming : mainTableData[0].childControl.FieldName is on your component.ts)

<dx-text-box
       [value]="mainTableData[0].childControl.FieldName">
</dx-text-box>

If you can also add custom attributes by doing :

<div [attr.dx-text-box] = "{bindingOptions: {
   value: 'mainTableData[0].{{childControl.FieldName}}'}}">
</div>

Upvotes: 0

M Fuat
M Fuat

Reputation: 1440

Try this:

<dx-text-box
       [(value)]="mainTableData[0].childControl.FieldName">
</dx-text-box>

Upvotes: 0

Related Questions