title: How to build a table row cell by cell in Angular 2
body: <p>Let's say, I've this table:</p>
  
  <pre><code>+--------+----------+----
  | Device | Serial # |
  +--------+----------+----
  | Cam1   | AB123    |
  +--------+----------+----
  </code></pre>
  
  <p>Since I don't know in advance the columns that'll be displayed, I construct the table by sending just a pair of key/vale for each cell.</p>
  
  <p>This is how I'm getting my data in C# code.</p>
  
  <pre><code>List&lt;List&lt;KeyValue&gt;&gt; myTable = deviceRepository.GetKeyValues(int facilityId);
  </code></pre>
  
  <p>Once set to the client side, data in the <code>myTable</code> will be of the following structure:</p>
  
  <pre><code>myTable = [
     [ { key: "DeviceName", value: "Device"}, { key: "SerialNumber", value: "Serial #"}, ..],
     [ { key: "DeviceName", value: "Cam1"}, { key: "SerialNumber", value: "AB123"}, ..],
      ...
      ]
  </code></pre>
  
  <p>In razor, I'd just have to loop through the list. </p>
  
  <pre><code>@foreach(var row in Model)
  {
    &lt;tr&gt;
         @foreach(var cell in row)
         {
             &lt;td&gt;@cell.Value&lt;/td&gt;
         }
    &lt;/tr&gt;
  }
  </code></pre>
  
  <p>In Angular, I don't see how to do that with directives.</p>
  
  <pre><code>&lt;tr *ngFor="let myInnerList of myTable"&gt;
      //I'd like to loop through the each inner list to build each table cell
  &lt;/tr&gt;
  </code></pre>
  
  <p>Thanks for helping</p>
  
  <h1>EDIT</h1>
  
  <p>Is it possible to get something like this? i.e if the column is the ID, display a checkbox so that the row can be selected.</p>
  
  <pre><code>@foreach(var cell in row)
  {
     if(cell.Key == "Id")
     {
       &lt;td&gt;&lt;input type="checkbox" id="row_@cell.Value" /&gt;&lt;/td&gt;
     }
     else
     {
         &lt;td&gt;@cell.Value&lt;/td&gt;
     }
  }
  </code></pre>
  
  <p>This way, the first cell for every row will display a checkbox.</p>