title: How to show first row of an array and then the subsequent rows in angular2
body: <p>Is it possible to show just the first row of an array on a particular line, then show the rest of the array in a separate location (such as a new table or card).</p>
  
  <p>For example, I have the following data:</p>
  
  <pre><code>public records = [{
     firstName: "Joe",
     lastName: "Smith",
     favBooks: [ "1984", "Animal Farm", "Lord of the Rings", "Where the Sidewalk Ends"]
  },
  {
     firstName: "Jane",
     lastName: "Jameson",
     favBooks: [ "Harry Potter", "Ender's Game", "Chronicles of Narnia"
  },
  {
     firstName: "Sam",
     lastName: "Baker",
     favBooks: "The Pelican Brief"
  }]
  </code></pre>
  
  <p>And I want the output to appear as follows :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tr.even {
    background-color: #C9D4D9;
  }
  th#accordian-icon 
  td[name="accordian-icon"]
  {
    width: 15px;
  }
  th#person-name 
  td[name="person-name"]
  {
    width: 250px;
  }
  th#fav-book 
  td[name="fav-book"]
  {
    width: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th id="accordion-icon"&gt;&lt;/th&gt;
      &lt;th id="person-name"&gt;Name&lt;/th&gt;
      &lt;th id="fav-book"&gt;Favorite Book(s)&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td name="accordion-icon"&gt;+&lt;/td&gt;
      &lt;td name="person-name"&gt;Joe Smith&lt;/td&gt;
      &lt;td name="fav-book"&gt;1984&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="even"&gt;
      &lt;td name="accordian-icon"&gt;-&lt;/td&gt;
      &lt;td name="person-name"&gt;Jane Jameson&lt;/td&gt;
      &lt;td name="fav-book"&gt;Harry Potter&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="even"&gt;
      &lt;td name="accordian-icon"&gt;&lt;/td&gt;
      &lt;td name="person-name"&gt;&lt;/td&gt;
      &lt;td name="fav-book"&gt;Ender's Game&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="even"&gt;
      &lt;td name="accordian-icon"&gt;&lt;/td&gt;
      &lt;td name="person-name"&gt;&lt;/td&gt;
      &lt;td name="fav-book"&gt;Chronicles of Narnia&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=""&gt;
      &lt;td name="accordian-icon"&gt;&lt;/td&gt;
      &lt;td name="person-name"&gt;Sam Baker&lt;/td&gt;
      &lt;td name="fav-book"&gt;The Pelican Brief&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is what I have so far (where accordionToggle is an icon name):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th id="accordion-icon"&gt;&lt;/th&gt;
      &lt;th id="person-name"&gt;Name&lt;/th&gt;
      &lt;th id="fav-book"&gt;Favorite Book(s)&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody *ngFor="let record of records; let even = even"&gt;
    &lt;tr [ngClass]="{even: even}"
        (click)="onTabClick($event)"&gt;
      &lt;td name="accordion-icon"&gt;
        &lt;i class="material-icons"&gt;{{accordionToggle}}&lt;/i&gt;
      &lt;/td&gt;
      &lt;td name="person-name"&gt;{{record.firstName}} {{record.lastName}}&lt;/td&gt;
      &lt;td name="fav-book"&gt;{{record.favBooks[0]}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;template [ngIf]="showBooks"&gt;
    &lt;tr *ngFor="let book of favBooks"
        [ngClass]="{even:even}"&gt;
      &lt;td name="accordian-icon"&gt;&lt;/td&gt;
      &lt;td name="person-name"&gt;&lt;/td&gt;
      &lt;td name="fav-book"&gt;{{book}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/template&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  
  
  <p>The problems I'm having are:</p>
  
  <ol>
  <li>Obviously, in the second set of rows, I have two bindings and that won't work.  How do I get the ngIf and the ngFor to work together?  (If I put the ngIf in a separate div that wraps the tr, the HTML treats the new set of rows as a different table in the first cell of the big table.)
    a. I fixed this issue by using the template element.</li>
  <li>The first book is repeated on the second row.</li>
  <li>When I click on any of the main rows (the ones with the name on it), all rows open up. I only want the row I clicked on to open. I'm sure with a bit more searching, I'll figure out how to pass the actual row being clicked on, but if there's an easy answer, I wouldn't mind it.</li>
  <li>The last row only has 1 book, and does not need to be expanded. I want to make it unclickable, but I'm not sure how to do that.</li>
  </ol>