title: Html/Angular toggle table rows to show hidden a table
body: <p>I am completely new to angular, I need to create a table. The data array is as-follows:-</p>
  
  <pre><code>data = [{rollno: 1,name: 'abc',subject: 'maths'},
          {rollno: 4,name: 'xyz',subject: 'history'},
          {rollno: 2,name: 'pqr',subject: 'history'}
         ];
  </code></pre>
  
  <p>I want to create a table with some summary rows based on this data and then when I click the expand button the sub-rows should appear beneath that summary-row indicating the actual data.</p>
  
  <p>For example:-</p>
  
  <pre><code>Expand/Collapse | No of Students | Subject
   click here        1                Maths
   click here        2               History
  </code></pre>
  
  <p>When I toggle the expand/collapse button on the second row for example I want actual rows to appear like this beneath it:-</p>
  
  <pre><code> Expand/Collapse | No of Students | Subject
   click here        1                Maths
   click here        2               History
   RollNo | StudentName
     4       xyz
     2       pqr
  </code></pre>
  
  <p>How Can I achieve this?</p>