title: Nested NgFor with trackBy not Updating html When adding new element to array
body: <p>I have been using Angular for a long time now, but suddenly got stuck with a very peculiar problem. Any help would be appreciated.</p>
  
  <p>I have an array of objects with <em>headerArray</em> with key value pair. One of the keys is <em>headerGroup</em> is again an array, so I am  using nested ngFor. It will update the html when no of elements are same in the array, but when I add a new element to the array, html is not getting updated in first click. But if I update anything inside newly added array element, the html change gets reflected.</p>
  
  <p>Here is my code sample</p>
  
  <pre><code>&lt;ng-container *ngFor="let header of headerArray;let i=index;trackBy:trackHeaderArray"&gt;
     &lt;ng-container *ngFor="let group of header.headerGroup;trackBy:trackGroupArray" matColumnDef="{{group.ColId}}"&gt;
  
  //some lines of html code
   &lt;/ng-container&gt;
     &lt;/ng-container&gt;
  
  //track by functions
    trackHeaderArray(index, header) {
          //  return  header.Id l
          return (index + 10 - header.Id);
      }
      trackGroupArray(index, group) {
          //return group ? group.Id : null
  
          return (index + 1000 - group.ColId);
      }
  
  
  </code></pre>