title: angular click table header to sort rows
body: <p>I am new to angular js, and honestly, I only know what I have been told by former colleague about the project that he passed on to me.</p>
  
  <p>I am using forkJoin to get the data from database because I need to use two different sets of data to create one table on the web. AND there are other data tables that I need to call on that same web page. So, forkJoin was what my colleague recommended, and using ngOnInit() was messy as not all of data arrive at the same time.</p>
  
  <p>From (<a href="https://stackoverflow.com/questions/19122942/angularjs-sorting-rows-by-table-header">AngularJS sorting rows by table header</a>) I found about using <strong>$scope</strong> and <strong>angular.module</strong> in *.ts file and <strong>orderBy</strong> and <strong>ng-repeat</strong> in *.html file. I was trying to get that working, but it seems that this example is using hardcoded table, not calling data from database. Also, when using <strong>ng-repeat</strong>, the following code does not seem to recognize <strong>ng-repeat</strong>.</p>
  
  <pre><code>&lt;tr ng-repeat="data in myTable|orderBy:'index':false"&gt;
     &lt;ng-container *ngIf="someConditions"&gt;
        &lt;td&gt;{{ data.index }}&lt;/td&gt; //data not recognized
     &lt;/ng-container&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Second alternative that I found was use <strong>Sort</strong> by importing from <strong>@angular/material</strong>. But, when I was trying to deploy that code, it gave me an error, which seemed related to version of dependencies. To make my colleague's code work, he and I had to check versions of major dependencies and now all of them are in sync. So, I did not want to mess with version issues.</p>
  
  <p>Finally, I found a way to sort table once when it is loaded on the web, but that is not exactly what I wanted to do. I want that table to dynamically sort rows whenever and whichever header I click. And that post (or answerer) said that ordering pipes should not be used. (<a href="https://stackoverflow.com/questions/48403154/orderby-with-ngfor-array">Orderby with *ngFor array</a>)</p>
  
  <p>So, </p>
  
  <ol>
  <li><p>is there any way to implement header click sorter while using <strong>forkJoin</strong> and <strong>ngFor</strong> (which I can get it to work unlike ng-repeat)?</p></li>
  <li><p>If it is much better to use <strong>angular.module</strong> and <strong>$scope</strong>, then how can I use them while calling all the tables simultaneously (i.e. how can I integrate</p></li>
  </ol>
  
  <pre><code>var app = angular.module('app',[]);
  
  app.controller('myCtrl', function($scope) {
     $scope.orderBy = 'index';
     ...
     $scope.data = {
        myData: [{
           ...
        }]
     };
  });
  </code></pre>
  
  <p>into *.ts file?)</p>