Как реализовать сортировку таблицы по одному столбцу в Angular 6 (с использованием boostrap)

Question

Может кто-нибудь предложить, пожалуйста, лучший способ реализовать сортировку по угловым 6 с использованием ботстрапа. Это мой стол. Мне нужно отсортировать таблицу с помощью mrp, ssp, ymp. Я пытался найти учебные пособия, но в Интернете есть реализация angularjs.

Может кто-нибудь предложить правильную угловую реализацию 6, используя таблицу данных

<table id="myTable" class="table table-striped table-bordered table-dark" #myTable>
   <thead>
      <tr>
         <th scope="col">#</th>
         <th scope="col">Id</th>
         <th scope="col">Image</th>
         <th scope="col">Name</th>
         <th scope="col">Seller</th>
         <th scope="col">Category</th>
         <th scope="col">Status</th>
         <th scope="col" sortable="mrp.value" class="sortable">MRP
         </th>
         <th scope="col" class="sortable">SSP     
         </th>
         <th scope="col" class="sortable"  >YMP
         </th>
         <th scope="col" class="sortable">Date Added
         </th>
      </tr>
   </thead>
   <tbody *ngFor ="let tempProduct of products">
      <tr>
         <th scope="row"><input type="checkbox" name="cbProducts"
            value=`${{tempProduct.id}}`></th>
         <td>{{tempProduct.id}}</td>
         <td>
            <img
               src="http://localhost:8080/YourMart-PMP-Admin- 
               Panel/resources/images/{{tempProduct.primaryImg}}"
               height="50" width="50">
         </td>
         <td>{{tempProduct.name}}</td>
         <td>{{tempProduct.seller.name}}</td>
         <td>{{tempProduct.category.name}}</td>
         <td>{{tempProduct.status}}</td>
         <td >{{tempProduct.mrp}}</td>
         <td >{{tempProduct.ssp}}</td>
         <td >{{tempProduct.ymp}}</td>
         <td >{{tempProduct.created}}</td>
      </tr>
   </tbody>
</table>