title: How to style min and max in the same table?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;div&gt;Agent ID&lt;/div&gt;&lt;/th&gt;
      &lt;th&gt;&lt;div&gt;Country&lt;/div&gt;&lt;/th&gt;
      &lt;th&gt;&lt;div&gt;Address&lt;/div&gt;&lt;/th&gt;
      &lt;th&gt;Date&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
          &lt;tr *ngFor="let item of resolvedAgents"&gt;
            &lt;td&gt;{{item.agent}}&lt;/td&gt;
            &lt;td&gt;{{item.country}}&lt;/td&gt;
            &lt;td&gt;{{item.address}}&lt;/td&gt;
            &lt;td&gt;{{item.date}}&lt;/td&gt;
          &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td colspan="4"&gt;
        {{ resolvedAgents?.length }} missions
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </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, OnInit } from '@angular/core';
  import { Agent } from '../shared/model/agent';
  import { AgentsService } from '../shared/services/agents.service';
  
  
  
  @Component({
    selector: 'nga-agents-list',
    templateUrl: './agents-list.component.html',
    styleUrls: ['./agents-list.component.scss']
  })
  export class AgentsListComponent implements OnInit {
    resolvedAgents: Agent[];
  
    constructor(private agentService: AgentsService) {
    }
  
    ngOnInit() {
      this.agentService.getAllAgents().subscribe((agents: Agent[]) =&gt; {
        agents.sort((x: Agent, y: Agent) =&gt;
          Number(new Date(x.date)) - Number(new Date(y.date)));
        this.resolvedAgents = agents;
        this.getIsolatedAgents();
      });
    }
  
    setMinMax(agent: Agent) {
      return this.pipe.transform(this.resolvedAgents, 'distance');
    }
  
  }
  
  
  
  0
  :
  {agent: "005", country: "Brazil", address: "Rua Roberto Simonsen 122, Sao Paulo", date: "May 5, 1986, 8:40:23 AM", distance: 9496.361799166812}
  1
  :
  {agent: "007", country: "Brazil", address: "Avenida Vieira Souto 168 Ipanema, Rio de Janeiro", date: "Dec 17, 1995, 9:45:17 PM", distance: 9285.800150412106}
  2
  :
  {agent: "011", country: "Poland", address: "swietego Tomasza 35, Krakow", date: "Sep 7, 1997, 7:12:53 PM", distance: 1415.508180342706}
  3
  :
  {agent: "007", country: "Morocco", address: "27 Derb Lferrane, Marrakech", date: "Jan 1, 2001, 12:00:00 AM", distance: 2301.0971356885716}
  4
  :
  {agent: "013", country: "Poland", address: "Zlota 9, Lublin", date: "Oct 17, 2002, 10:52:19 AM", distance: 1569.274444863945}
  5
  :
  {agent: "008", country: "Brazil", address: "Rua tamoana 418, tefe", date: "Nov 10, 2005, 1:25:13 PM", distance: 8589.24697562705}
  6
  :
  {agent: "005", country: "Poland", address: "Rynek Glowny 12, Krakow", date: "Apr 5, 2011, 5:05:12 PM", distance: 1415.2498838353406}
  7
  :
  {agent: "003", country: "Morocco", address: "Rue Al-Aidi Ali Al-Maaroufi, Casablanca", date: "Aug 29, 2012, 10:17:05 AM", distance: 2080.2380214223626}
  8
  :
  {agent: "009", country: "Morocco", address: "atlas marina beach, agadir", date: "Dec 1, 2016, 9:21:21 PM", distance: 2470.703534438294}
  9
  :
  {agent: "002", country: "Morocco", address: "Riad Sultan 19, Tangier", date: "Jan 1, 2017, 5:00:00 PM", distance: 1804.7796192553526}</code></pre>
  </div>
  </div>
  </p>