title: Angular 6 ngFor list of tables grouped by key
body: <p>My Angular 6 app needs to displays a list of tables, where a table is a group of chemical analyses of elements of its composition.</p>
  
  <p>Lets say I have a metal alloy <em>A</em>. I perform different compound analyses on it to find its chemical composition: Fe: 0.001%, Cu: 0.042%, etc.</p>
  
  <p>Here is my data source, which is only a typescript file with mocks</p>
  
  <pre><code>import { Certificate } from './certificate';
  
  export const CERTIFICATES: Certificate[] = [
      { serie: '1050 AJ', ident: 'Fe', moy_certified: 0.297 },
      { serie: '1050 AJ', ident: 'Cu', moy_certified: 0.04 },
      { serie: '1050 AJ', ident: 'Mn', moy_certified: 0.0374 }, 
      { serie: 'X332.0 AC', ident: 'V', moy_certified: 0.019 },
      { serie: 'X4002 AA', ident: 'Mn', moy_certified: 0.037 }
  ];
  </code></pre>
  
  <p>I would like to display this data, in HTML using Angular 6, in a list of tables, where each analyses of a series are grouped like this:</p>
  
  <pre><code>Serie: 1050 AJ
  -------------------------
  | Element | Composition |
  -------------------------
  |    Fe   |    0.0297   |
  -------------------------
  |    Cu   |    0.04     |
  -------------------------
  |    Mn   |    0.0374   |
  
  Serie: X332.0 AC
  -------------------------
  | Element | Composition |
  -------------------------
  |    V    |    0.019    |
  
  Serie: X332.0 AC
  -------------------------
  | Element | Composition |
  -------------------------
  |    Mn   |    0.037    |
  </code></pre>
  
  <p>My HTML file for now looks like this</p>
  
  <pre><code>&lt;ul class="cert-result"&gt;
      &lt;li *ngFor="let certificate of certificates"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;Serie&lt;/th&gt;
            &lt;th&gt;Element&lt;/th&gt;
            &lt;th&gt;Composition&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;{{certificate.serie}}&lt;/td&gt;
            &lt;td&gt;{{certificate.ident}}&lt;/td&gt;
            &lt;td&gt;{{certificate.moy_certifiee}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>And obviously, this isn't the right way to do it since it makes a table for each elements of my data source.</p>