title: angular2 table with dynamic rows and columns
body: <p>How do I create a table with dynamic columns and rows in angular2</p>
  
  <p>I have the data coming from a rest service and captured in this observable</p>
  
  <pre><code>this._physicalDataService.getPhysicalData().subscribe(res=&gt; this.data = res)
  </code></pre>
  
  <p>I can display the rows dynamically through this code. How do I make the columns and the column headers dynamic too ie how can i extract all the JSON keys in an array to put another loop on top.</p>
  
  <p>To clarify my backend service may return different datasets with different columns and row and I want to show them dynamically on a page.</p>
  
  <pre><code>               &lt;thead class="no-bd"&gt;
                          &lt;tr&gt;
                            &lt;th&gt;Id&lt;/th&gt;
                            &lt;th&gt;Number&lt;/th&gt;
                            &lt;th &gt;Employee Name&lt;/th&gt;
                            &lt;th &gt;Manager Name&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;/thead&gt;
  
                          &lt;tbody&gt;
  
                          &lt;tr *ngFor="let tablerows of data"&gt;
                            &lt;td&gt;
                            {{tablerows.row_id}}
                            &lt;/td&gt;
                            &lt;td&gt;{{tablerows.number}}&lt;/td&gt;
                            &lt;td &gt;{{tablerows.employee_name}}&lt;/td&gt;
                            &lt;td &gt;{{tablerows.manager_name}}
                            &lt;/td&gt;
                          &lt;/tr&gt;
  </code></pre>