title: How to show very deeply nested components when angular changeDetector does'nt detect them?
body: <p>I have a component named Grid, its template is:</p>
  <pre><code>&lt;div *ngFor=&quot;let row of item.rows&quot;&gt;
    &lt;div *ngFor=&quot;let col of row.cols&quot;&gt;
      &lt;div *ngFor=&quot;let grid of col.items&quot;&gt;
        &lt;app-grid [item]=&quot;grid&quot;&gt;&lt;/app-grid&gt;
        &lt;!-- another content --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and a parent component with the content:</p>
  <pre><code>&lt;div *ngFor=&quot;let entireGrid of ser.Grids&quot;&gt;
      &lt;app-grid [item]=&quot;ser.entireGrid&quot;&gt;&lt;/app-grid&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In my parent component ts I have this constructor:</p>
  <pre><code>constructor(public ser:myService){
  ser.getGrids().subscribe(data=&gt;{
  data.grids.foreach(g=&gt;{
  ser.grids.push(g);
  });
  });
  </code></pre>
  <p>and myService has the variable:</p>
  <pre><code>grids:Array&lt;Grid&gt;=[];
  </code></pre>
  <p>my problem is - each entireGrid is nested very deeply (inside it there are many rows and inside them many cols and inside them many grids and inside them many rows again...)
  so when I reshow the parent component the deepest grids don't appear, only when I click on one of the grids that does appear they appear.
  I've tried to put <code>cd.detectChanges</code> in the grid component in the functions <code>ngOnInit</code> , <code>ngAfterViewChecked</code> , <code>ngDoCheck</code> but nothing worked.
  does somone have an idea how to solve it?</p>