title: Toggle row based on ID - Angular 4
body: <p>I have a table, and when I click on some row, I want to display another row under it (with some info about that row). I dont know how to make it possible to toggle it, but also to be able to open multiple sub-rows. Somehow I need to enable toggle based on row ID, this is what I came up with but it doesn't really work like I need it.</p>
  
  <pre><code>&lt;ng-container *ngFor=" let fields of mf.data; let i = index"&gt;
      &lt;tr&gt;
       &lt;td (click)="expandCompareRow(i)"&gt;Something&lt;/td&gt;
       &lt;td&gt;Something&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr *ngIf="compareRowExpanded == i &amp;&amp; expandedRow"&gt;
       &lt;td&gt;Something&lt;/td&gt;
       &lt;td&gt;Something&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/ng-container&gt;
  
      TS: 
      expandCompareRow(index) {
          this.compareRowExpanded = index;
          this.expandedRow = !this.expandedRow;
        }
  </code></pre>
  
  <p>This opens a row, but when I want to open another one, it first closes the row that is already opened, then I have to click again to open this row.</p>