How to push and update deep nested values in angul

Question

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.

Answer 1

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.

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

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