title: Sort table from observable in Angular 6
body: <p>I'm doing an app in Angular 6, where I'm getting data from JSON API to table. I have to sort this data's after click on header. 
  I don't know, how should I do it. I am a beginner at Angular, I am asking for your understanding</p>
  
  <p>My .ts code</p>
  
  <pre><code>    export class AppComponent implements OnInit {
  
    readonly ROOT_URL = '...';
    datas: Observable&lt;Data[]&gt;;
  
    constructor(private http: HttpClient) {
    }
  
    sortTable(parm) {
      this.datas.subscribe(item =&gt; item.sort((a: any, b: any) =&gt; {
        return a[parm] - b[parm];
      }));
    }
  
    getDatas() {
      this.datas = this.http.get&lt;Data[]&gt;(this.ROOT_URL);
    }
  
  
    ngOnInit() {
      this.getDatas();
  
  
    }
  
  }
  </code></pre>
  
  <p>Interface</p>
  
  <pre><code>export interface Data {
    long: string;
    perc: number;
    price: number;
  }
  </code></pre>
  
  <p>And HTML Code</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
    &lt;table class="table"&gt;
      &lt;thead class="thead-dark"&gt;
        &lt;tr&gt;
          &lt;th scope="col" (click)="sortTable(long)"&gt;Nazwa&lt;/th&gt;
          &lt;th scope="col"&gt;Cena&lt;/th&gt;
          &lt;th scope="col"&gt;Zmiana(24h)&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody *ngFor="let data of datas | async" style="font-size: 12px;"&gt;
        &lt;tr&gt;
          &lt;td&gt;{{ data.long }}&lt;/td&gt;
          &lt;td&gt;{{ data.price }} $&lt;/td&gt;
          &lt;td&gt;{{ data.perc }} %&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>