title: Angular 7 Grouping Data Using *ngfor
body: <p><strong>Right now i have data coming in like this in my angular application</strong></p>
  
  <p><a href="https://stackblitz.com/edit/angular-ymmt4d" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ymmt4d</a></p>
  
  <p><a href="https://i.stack.imgur.com/jgEIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jgEIw.png" alt="enter image description here"></a></p>
  
  <p><strong>How can i group and order the data by State and County and display like below table</strong></p>
  
  <p><a href="https://i.stack.imgur.com/azRyC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/azRyC.png" alt="enter image description here"></a></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-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    data = [
      { state: 'MN', county: '1', item: 0.297 },
      { state: 'MN', county: '1', item: 0.04 },
        { state: 'CA', county: '2', item: 0.019 },
      { state: 'MN', county: '1', item: 0.0374 }, 
      { state: 'CA', county: '2', item: 0.037 }
  ]
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;table &gt;
          &lt;tr&gt;
            &lt;th&gt;State&lt;/th&gt;
            &lt;th&gt;County&lt;/th&gt;
            &lt;th&gt;Item&lt;/th&gt;
          &lt;/tr&gt;
          &lt;ng-container *ngFor="let dataitem of data"&gt;
          &lt;tr&gt;
            &lt;td&gt;{{dataitem.state}}&lt;/td&gt;
            &lt;td&gt;{{dataitem.county}}&lt;/td&gt;
            &lt;td&gt;{{dataitem.item}}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/ng-container&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>