0

i have a deeply nested array as follow

mainarray[]:{
array1[]:{sub1_array1[]:{},sub2_array1:{}},
array2[]
... // and so on
}

since i am retriving main array on init how can i push sub2_array1 updated values? but since on change view renders and ui state is changed including some active class components. so how can i maintain that? i read something about pipes and changedetectorRef but can't figure out how to use it ? Thanks in advance.

noobProgrammer
  • 2,884
  • 3
  • 17
  • 20

1 Answers1

2

Something is very wrong with your array/object. And tsc complains about it. Please check https://stackoverflow.com/a/37824284/1267942

Very lively it's nothing to do do with pipes and changedetectorRef, you just need to declare your model correctly.

Update: There are couple thing here:

  1. Correct way of interacting between parent and child components https://angular.io/docs/ts/latest/cookbook/component-communication.html#

  2. Having common data model for multiple nested components:

Declare a class member in a parent component, like

model: Array<string> = [];

In the template pass it to a child component using two-way binding

<child-component [(modelInChild)]="model"></child-component>

In the child model variable should be declared as

@Input() modelInChild: Array<string> = [];

Then you can pass the variable further to child of child the same way.

Using this method you'll have common data model in the whole tree of components. However, this method is not recommended: it's slow, it's hard to track value of a model, etc.

  1. Component can use itself as a child. I haven't tried this approach yet, but Angular2 Recursive Templates in javascript looks very promising.

  2. For the Collapsible component check Angular 2 Read More Directive

Community
  • 1
  • 1
Andrei Zhytkevich
  • 8,039
  • 2
  • 31
  • 45
  • hi thanks for the answer , actually when i update the low level model , i can not map and push it into higher model since its nested and can't map to exact dynamic location so basically i would need to call the whole higher level model again and map it again right? if yes its actually disturbing html resetting all "active" class component , is there any way to avoid this?? – noobProgrammer Jun 15 '16 at 23:55
  • are you getting? i mean for eg. i have some list/collapsible components etc so the one which are open will be collapse again... – noobProgrammer Jun 15 '16 at 23:59
  • wow thats interesting ...dont know how its gonna work... i wil give it a try and will let you know, but i think angular2 should have something like compare data and change only which is necessary...why its not just simple with observable and BehaviorSubject ... – noobProgrammer Jun 16 '16 at 02:56