few tweaks

app/src/app/app.component.scss

@@ -1,7 +1,3 @@
-body {
-  cursor: pointer;
-}
-
 th[sortable] {
   cursor: pointer;
   user-select: none;
@@ -12,7 +8,7 @@ th[sortable].desc:before,
 th[sortable].asc:before {
   content: "";
   display: block;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC")
+  background: url("https://www.shareicon.net/data/256x256/2015/11/07/668115_arrows_512x512.png")
     no-repeat;
   background-size: 22px;
   width: 22px;

app/src/app/app.component.ts

@@ -9,23 +9,17 @@ import {
   ViewChildren,
 } from '@angular/core';
 import { Product } from 'src/models/product';
+import { SortColumn, SortDirection, SortEvent } from 'src/models/sortevent';
 import { ProductsService } from 'src/services/products.service';
 
-export type SortColumn = keyof Product | '';
-export type SortDirection = 'asc' | 'desc' | '';
 const rotate: { [key: string]: SortDirection } = {
   asc: 'desc',
-  desc: '',
+  desc: 'asc',
   '': 'asc',
 };
 
-const compare = (v1: string | number, v2: string | number) =>
-  v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
-
-export interface SortEvent {
-  column: SortColumn;
-  direction: SortDirection;
-}
+const compare = (param1: string | number, param2: string | number) =>
+  param1 < param2 ? -1 : param1 > param2 ? 1 : 0;
 
 @Directive({
   selector: 'th[sortable]',
@@ -75,7 +69,11 @@ export class AppComponent implements OnInit {
     let productsFromLocalStorage = JSON.parse(
       localStorage.getItem('products') as string
     );
-    this.products = productsFromLocalStorage
+    this.mapAndSliceProducts(productsFromLocalStorage);
+  }
+
+  mapAndSliceProducts(products: any) {
+    this.products = products
       .map((product: any, i: number) => ({ id: i + 1, ...product }))
       .slice(
         (this.page - 1) * this.pageSize,

app/src/models/sortevent.ts

@@ -0,0 +1,9 @@
+import { Product } from './product';
+
+export type SortColumn = keyof Product | '';
+export type SortDirection = 'asc' | 'desc' | '';
+
+export interface SortEvent {
+  column: SortColumn;
+  direction: SortDirection;
+}