title: How to dynamically recreate datagrid columns at runtime?
body: <p>I'm calling an API service that returns a JSON array. I also have a code in the front-end that composes a list of columns or fields based on the JSON. This list of columns is not a fixed-list and can be different based on the JSON content. So, I need to recreate the data grid columns dynamically at runtime.</p>
  
  <p>It works when using *ngFor directive and loop through an array of columns that is pre-defined or pre-initialized in the code but, I need to change the list of columns at runtime.</p>
  
  <p>Example:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;clr-dg-column *ngFor="let field of fields" [clrDgField]="field.name"&gt;
      {{ field.text }}
  &lt;/clr-dg-column&gt;
  </code></pre>
  
  <pre><code>let fields = [ { name: "id", text: "Id" }, { name: "name", text: "Name" }];
  
  changeFields() {
      this.fields = [ { name: "userId", text: "User Id" }, { name: "desc", text: "Description" }];
  }
  </code></pre>
  
  <p>When the <code>changeFields()</code> function is called, I expected the datagrid columns to be changed to the new list of columns. But the problem is that it doesn't re-render the columns.</p>
  
  <p>The example below, shows the first image with the initial columns of the data grid, the 2nd image shows blank columns when changed at run-time</p>
  
  <p><strong>Before changing the fields variables:</strong></p>
  
  <p><img src="https://i.imgur.com/iRT9RQM.png" alt="Before changing columns"></p>
  
  <p><strong>After changing the fields at run-time:</strong></p>
  
  <p><img src="https://i.imgur.com/zAkHFog.png" alt="After changing columns"></p>