Adding Sorting Functionality to Angular Material Table

Below are the steps of how to add sorting feature of pre-fetched data to Angular Material 6 Table:

- on html page, add matSort to the table and mat-sort-header to each column that we would like to enable:

<table mat-table . . . matSort>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>
. . .
</table>

- on module page (e.g., module.ts):

import { MatSortModule } from '@angular/material/sort;
@NgModule({
  . . .,
  imports: [
    . . .
    MatSortModule
  ],
. . .
})

- on component page (e.g., component.ts):

import { MatSort } from '@angular/material';
export class AppComponent implements AfterViewInit, OnInit{
  . . .
 
  @ViewChild(MatSort) sort: MatSort;
 
 
  ngAfterViewInit() {
    . . .
    this.dataSource.sort = this.sort;
  }
 
  . . .
}

I will create a post of how to do paging and sorting with server-side data interaction soon.

Attempt to use Visual Studio 2017 for Older Apache Cordova App

I have an Ionic 1 with Apache Cordova built using Visual Studio 2015. As time goes by, I couldn't upload package to Apple Store and Google Play anymore as they were asking more recent iOS and Android versions supported in the package. Then thinking to target more recent mobile phone OS, I decided to try Visual Studio 2017 on the same machine. After installing and trying to build, I got some errors.

First error I got is:

Could not resolve com.android.tools.build:gradle:2.1.0. 
Could not get resource 'https://repo1.maven.org/maven2/com/android/tools/build/gradle/2.1.0/gradle-2.1.0.pom'.
Could not HEAD 'https://repo1.maven.org/maven2/com/android/tools/build/gradle/2.1.0/gradle-2.1.0.pom'.
Could not get resource 'https://jcenter.bintray.com/com/android/tools/build/gradle/2.1.0/gradle-2.1.0.pom'.
Could not HEAD 'https://jcenter.bintray.com/com/android/tools/build/gradle/2.1.0/gradle-2.1.0.pom'.

After some googling, it seemed that I had issue with contacting the target servers using HTTPS. I changed these lines on platforms\adroid\build.gradle file:

buildscript {
    repositories {  
        //mavenCentral()
        //jcenter()
        // change to use HTTP explicitly
        jcenter {
   url "http://jcenter.bintray.com/"
  }
    }
    . . .
}

. . .

allprojects {
    repositories {
        //mavenCentral()
        //jcenter()
        // change to use HTTP explicitly
        jcenter {
   url "http://jcenter.bintray.com/"
  }  
    }
}

Also on platforms\adroid\CordovaLib\build.gradle:

buildscript {
    repositories {
        //mavenCentral()
        // change to use HTTP explicitly 
        maven { url 'http://repo1.maven.org/maven2' }
        jcenter {
   url "http://jcenter.bintray.com/"
  }
    }
    . . .
}

Then I found another issue:

cordova-build error : java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0

This was fixed by updating the project to use the latest Java installed. Go to Tools -> Options -> Tools for Apache Cordova -> Environment Variable Overrides, then change the JAVA_HOME folder.

Then I tried to run Google Emulator and it was still using the old AVD that had been installed previously. And when I checked config.xml file, VS2017 only supports Cordova 6.3.1 and Global Cordova 7.0.1 by default. I was expecting it supports a more recent version of Cordova that supports the recent versions of Android and iOS. This is the main reason I tried to upgrade to catch up with recent version of Android and iOS in the market. Seeing so many hassles and no update from Visual Studio Tool for Apache Cordova team for almost two years, I think I will try to upgrade my app using Cordova CLI itself.