Two way data binding with object?

Question

I have the following in the parent component:

output = {};

In the child I have this:

 @Input() output: GroupCompnent;
this.output.output = this.gridOptions.api.getSelectedRows();

Now I get this structure:

Object {output: Array(2)}
output Array(2)
[0]:Object
[1]:Object

But I want this:

[Object, Object]

Any suggestion how I can do that?

I want to achive two way data binding with object, so when I change value to child to be referenced on parent and get that data in parent.

Parent:

  output = {};
   <div *ngIf="visible">
     <z-ag-table [items]="gridOptions" [output]="output"></z-ag-table>
    </div>

Child:

 @Input() output:GroupComponent;
 selected = () =>  this.output.output = this.gridOptions.api.getSelectedRows();

AVJT82 · Accepted Answer · 2017-07-24 10:28:21Z

2

The output you are currently getting is totally correct. You are inserting an array to a property output in your object output. Seems that you want output to actually be an array. So change the declaration of output to an array in the parent:

output = [];

Then in parent, instead of just assigning the value as is, let's fetch the data and then push it to your output array. Also you shouldn't mark the @Input() with a component (?)

@Input() output:GroupComponent;

since it's an array:

@Input() output: Array<Object> // or if it's a typed array, change it

Then in OnInit we can fetch the array and map the content to the output array:

ngOnInit() {
  let arr = this.gridOptions.api.getSelectedRows()
  arr.map(x => this.output.push(x))
}

We need to do it this way to keep the reference between parent output and child output.

edited Jul 24, 2017 at 10:28

answered Jul 24, 2017 at 9:15

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ΩmegaMan · Accepted Answer · 2018-01-14 21:43:50Z

1

For a two way databinding you will need to declare an input and output in the child, something like this:

@Input() output= 0;
@Output() outputChange = EventEmitter<any>();

Have in mind that the output event has to be named like "Change"

After reading the comments I would suggest:

selected = () =>  { this.output.splice(0); 
     this.output.concat(<your new array>(this.gridOptions.api.getSelectedRows()))
}

edited Jan 14, 2018 at 21:43

ΩmegaMan

32.2k13 gold badges110 silver badges138 bronze badges

answered Jul 24, 2017 at 7:42

kimy82

4,5343 gold badges25 silver badges25 bronze badges

9 Comments

None Over a year ago

I dont need emit if i use complex object, that is two way binding automatically

kimy82 Over a year ago

Ok, I see the problem now. Could be that you need this.output = instead of this.output.output =

None Over a year ago

when i do this.output = .... in parent i dont get anything, i get an empty object again, or undefined

None Over a year ago

Any suggestion @kimy82 ?

kimy82 Over a year ago

I think I need more code. Could you paste the parent and child code.

|

Collectives™ on Stack Overflow

Two way data binding with object?

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related