Content in cascaded components


I have 3 components A, B and C. Each componet has a modal, that opens and I can change something, for example the text of a button. This is working.

Further I have a componet1 which I can set with an array and NgFor the sequence of A’s, B’s and C’s in componet1 and set propertys to A, B and C’s. This is working.

Next I have a componet2 which has as content a list of component2. I feed component3 with an array that creates with ngfor the list and a sub array that feeds component 2 ans set the propertys of A,B and C#s This is also working.

If I tap for example on A I can change something for example a string in a button contained in A. This is working as expected.

Now I need from compont2 propertys somebody changed in A, B or C. I use @Viewchildren to get the componet1s and further I get the A, B and C’s.

But A.B. C’s property contains the initial values. For example If I set button with initial value ‘hello’ and user change it to ‘goodbye’ the button shows these change. If I get componet1 with viewchildren and further A and read the property, then it has ‘hello’ as value. Otherwise If I tap on A I can check it has ‘googbye’ as value.

Any advice what is wrong? or for what I must look or…

Best regards, anna-liebt.

Hi @anna_liebt ,

Can you elaborate on what html containers to hold this in the template view ? I know some won’t do the job because of Angular limits, after some time the query will just fall down :confused:

Also, I work with a nested tab myself, I know if I go too high in absctraction, angular or Ionic will simply drop it down. It’s the same issue.

So, again I ask, how do you call the children inside the html ? I believe the issue is around there.

Good luck,


Hello FrancoisisIonic,

I solved my problem. I had a typo fault, that pointed to test data and I changed my code but Ionic didn’t update my correction. After deleting the files in www/build and a restart it was working. That ionic did not update everything well I got often (mostly with css, but also with html and ts code). Is there a way to force a full update?

That a query falls down ( meaning the result has lenght 0?) I haven’t yet. I have somethimes lifecycle problems in cascading components with @ViewChild, @Viewchildren and ngFors. What is working with testdata to test a component must not work with cascaded data.

Thanks, anna-liebt.

Hi Anna, glad to hear you found a solution :slight_smile:

Well to force full an update, I suggest you swith to Ionic Pro (the new Ionic Cloud) and if your app is in production aldready use Deploy function.

And I assume your code is tested in --prod mode (pre-compliled), if not it’s a bit slow in nature with ionic serve. Testing with Ionic View normally does automatically that anyways (not sure it compiles fully with new Ionic View).